以前にスクロールバーのプラグインを紹介したが、また新しくjQueryプラグインにperfect-scrollbarがあったので試してみた。
ダウンロードは次のサイトより
http://noraesae.github.io/perfect-scrollbar/
使い方
１．ダウンロードした次のJavascriptとCSSファイルの読込みをHTMLに組み込む。
- jquery.mousewheel.js
- perfect-scrollbar.js
- perfect-scrollbar.css
2.次の「HTMLおよびCSS」に示すようにスクロールバー適用要素をperfectScrollbar()で指定する。
HTMLおよびCSS
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta http-equiv="Content-Script-type" content="text/javascript">
<script type="text/javascript" src="http://sample.com/js/jquery.min.js"></script>
<link href="http://sample.com/css/perfect-scrollbar.css" rel="stylesheet">
<script type="text/javascript" src="http://sample.com/js/jquery.mousewheel.js"></script>
<script type="text/javascript" src="http://sample.com/js/perfect-scrollbar.js"></script>
<title>perfect-scrollbar example</title>
<style type="text/css">
.contentHolder {
position:relative;
margin:0px 10px;
padding:0px;
width: 620px;
height: 520px;
overflow: hidden;
background:#000;
}
.contentHolder .content {
background:#000;
width: 580px;
margin:0 auto;
color:#ffffff;
padding:10px;
font-size:1.1em;
line-height:1.5em;
}
</style>
<script type="text/javascript">
$(function() {
$('#Default').perfectScrollbar();
});
</script>
</head>
<body>
<div id="Default" class="contentHolder">
<div class="content">
吾輩は猫である。名前はまだ無い。<br>
どこで生れたか<ruby>頓<rp>(</rp><rt>とん</rt><rp>)</rp></ruby>と見當がつかぬ。<br>
何でも薄暗いじめじめした所でニヤーニヤー泣いて居た事丈は記憶して居る。<br>
吾輩はこゝで始めて人間といふものを見た。<br>
<ruby>然<rp>(</rp><rt>しか</rt><rp>)</rp></ruby>もあとで聞くとそれは書生といふ人間中で一番<ruby>獰悪<rp>(</rp><rt>だうあ</rt><rp>)</rp></ruby>な種族であつたさうだ。<br>
此書生といふのは時々我々を<ruby>捕<rp>(</rp><rt>つかま</rt><rp>)</rp></ruby>へて煮て食ふといふ話である。<br>
然し其當時は何といふ<ruby>考<rp>(</rp><rt>かんがへ</rt><rp>)</rp></ruby>もなかつたから別段恐しいとも思はなかつた。<br>
<ruby>但<rp>(</rp><rt>たゞ</rt><rp>)</rp></ruby>彼の<ruby>掌<rp>(</rp><rt>てのひら</rt><rp>)</rp></ruby>に載せられてスーと持ち上げられた時何だかフハフハした感じが有つた<ruby>許<rp>(</rp><rt>ばか</rt><rp>)</rp></ruby>りである。掌の上で少し落ち付いて書生の顔を見たのが<ruby>所謂<rp>(</rp><rt>いはゆる</rt><rp>)</rp></ruby>人間といふものゝ<ruby>見始<rp>(</rp><rt>みはじめ</rt><rp>)</rp></ruby>であらう。此時妙なものだと思つた感じが今でも殘つて居る。<br>
そうして其穴の中から時々ぷうぷうと<ruby>烟<rp>(</rp><rt>けむり</rt><rp>)</rp></ruby>を吹く。どうも<ruby>咽<rp>(</rp><rt>む</rt><rp>)</rp></ruby>せぽくて實に弱つた。是が人間の飲む<ruby>烟草<rp>(</rp><rt>たばこ</rt><rp>)</rp></ruby>といふものである事は漸く<ruby>此頃<rp>(</rp><rt>このごろ</rt><rp>)</rp></ruby>知つた。<br>
此書生の掌の<ruby>裏<rp>(</rp><rt>うち</rt><rp>)</rp></ruby>でしばらくはよい心持に坐つて居つたが、暫くすると非常な速力で運轉し始めた。<br>
書生が動くのか自分<ruby>丈<rp>(</rp><rt>だけ</rt><rp>)</rp></ruby>が動くのか分らないが無暗に眼が廻る。胸が惡くなる。到底助からないと思つて居ると、どさりと音がして眼から火が出た。<ruby>夫迄<rp>(</rp><rt>それまで</rt><rp>)</rp></ruby>は記憶して居るがあとは何の事やらいくら考へ出さうとしても分らない。
・
・
・
</div>
</div>
</body>
</html>
サンプル
吾輩は猫である。名前はまだ無い。
どこで生れたか頓と見當がつかぬ。
何でも薄暗いじめじめした所でニヤーニヤー泣いて居た事丈は記憶して居る。
吾輩はこゝで始めて人間といふものを見た。
然もあとで聞くとそれは書生といふ人間中で一番獰悪な種族であつたさうだ。
此書生といふのは時々我々を捕へて煮て食ふといふ話である。
然し其當時は何といふ考もなかつたから別段恐しいとも思はなかつた。
但彼の掌に載せられてスーと持ち上げられた時何だかフハフハした感じが有つた許りである。掌の上で少し落ち付いて書生の顔を見たのが所謂人間といふものゝ見始であらう。此時妙なものだと思つた感じが今でも殘つて居る。
第一毛を以て装飾されべき筈の顔がつるつるして丸で薬罐だ。其後猫にも大分逢つたがこんな片輪には一度も出會はした事がない。
加之顔の眞中が餘りに突起して居る。そうして其穴の中から時々ぷうぷうと烟を吹く。どうも咽せぽくて實に弱つた。是が人間の飲む烟草といふものである事は漸く此頃知つた。
此書生の掌の裏でしばらくはよい心持に坐つて居つたが、暫くすると非常な速力で運轉し始めた。
書生が動くのか自分丈が動くのか分らないが無暗に眼が廻る。胸が惡くなる。到底助からないと思つて居ると、どさりと音がして眼から火が出た。夫迄は記憶して居るがあとは何の事やらいくら考へ出さうとしても分らない。
ふと氣が付いて見ると書生は居ない。澤山居つた兄弟が一疋も見えぬ。肝心の母親さへ姿を隱して仕舞つた。其上今迄の所とは違つて無暗に明るい。眼を明いて居られぬ位だ。果てな何でも容子が可笑いと、のそのそ這ひ出して見ると非常に痛い。吾輩は藁の上から急に笹原の中へ棄てられたのである。
漸くの思ひで笹原を這ひ出すと向ふに大きな池がある。吾輩は池の前に坐つてどうしたらよからうと考へて見た。別に是といふ分別も出ない。暫くして泣いたら書生が又迎に來てくれるかと考へ付いた。
ニヤー、ニヤーと試みにやつて見たが誰も來ない。其内池の上をさらさらと風が渡つて日が暮れかゝる。腹が非常に減つて來た。泣き度くても聲が出ない。仕方がない、何でもよいから食物のある所迄あるかうと決心をしてそろりそろりと池を左りに廻り始めた。
どうも非常に苦しい。そこを我慢して無理やりに這つて行くと漸くの事で何となく人間臭い所へ出た。此所へ這入つたら、どうにかなると思つて竹垣の崩れた穴から、とある邸内にもぐり込んだ。
縁は不思議なもので、もし此竹垣が破れて居なかつたなら、吾輩は遂に路傍に餓死したかも知れんのである。一樹の蔭とはよく云つたものだ。
此垣根の穴は今日に至る迄吾輩が隣家の三毛を訪問する時の通路になつて居る。偖邸へは忍び込んだものゝ是から先どうして善いか分らない。
其内に暗くなる、腹は減る、寒さは寒し、雨が降つて來るといふ始末でもう一刻も猶豫が出來なくなつた。仕方がないから兎に角明るくて暖かさうな方へ方へとあるいて行く。
今から考へると其時は既に家の内に這入つて居つたのだ。こゝで吾輩は彼の書生以外の人間を再び見るべき機會に遭遇したのである。第一に逢つたのがおさんである。
是は前の書生より一層亂暴な方で吾輩を見るや否やいきなり頸筋をつかんで表へ抛り出した。いや是は駄目だと思つたから眼をねぶつて運を天に任せて居た。
然しひもじいのと寒いのにはどうしても我慢が出來ん。吾輩は再びおさんの隙を見て臺所へ這ひ上つた。すると間もなく又投げ出された。吾輩は投げ出されては這ひ上り、這ひ上つては投げ出され、何でも同じ事を四五遍繰り返したのを記憶して居る。其時におさんと云ふ者はつくづくいやになつた。
此間おさんの三馬を偸んで此返報をしてやつてから、やつと胸の痞が下りた。吾輩が最後につまみ出され樣としたときに、此家の主人が騷々しい何だといひながら出て來た。
下女は吾輩をぶら下げて主人の方へ向けて此宿なしの小猫がいくら出しても出しても御臺所へ上つて來て困りますといふ。主人は鼻の下の黑い毛を撚りながら吾輩の顔を暫く眺めて居つたが、やがてそんなら内へ置いてやれといつたまゝ奥へ這入つて仕舞つた。主人は餘り口を聞かぬ人と見えた。
下女は口惜しさうに吾輩を臺所へ抛り出した。かくして吾輩は遂に此家を自分の住家と極める事にしたのである。
どこで生れたか頓と見當がつかぬ。
何でも薄暗いじめじめした所でニヤーニヤー泣いて居た事丈は記憶して居る。
吾輩はこゝで始めて人間といふものを見た。
然もあとで聞くとそれは書生といふ人間中で一番獰悪な種族であつたさうだ。
此書生といふのは時々我々を捕へて煮て食ふといふ話である。
然し其當時は何といふ考もなかつたから別段恐しいとも思はなかつた。
但彼の掌に載せられてスーと持ち上げられた時何だかフハフハした感じが有つた許りである。掌の上で少し落ち付いて書生の顔を見たのが所謂人間といふものゝ見始であらう。此時妙なものだと思つた感じが今でも殘つて居る。
第一毛を以て装飾されべき筈の顔がつるつるして丸で薬罐だ。其後猫にも大分逢つたがこんな片輪には一度も出會はした事がない。
加之顔の眞中が餘りに突起して居る。そうして其穴の中から時々ぷうぷうと烟を吹く。どうも咽せぽくて實に弱つた。是が人間の飲む烟草といふものである事は漸く此頃知つた。
此書生の掌の裏でしばらくはよい心持に坐つて居つたが、暫くすると非常な速力で運轉し始めた。
書生が動くのか自分丈が動くのか分らないが無暗に眼が廻る。胸が惡くなる。到底助からないと思つて居ると、どさりと音がして眼から火が出た。夫迄は記憶して居るがあとは何の事やらいくら考へ出さうとしても分らない。
ふと氣が付いて見ると書生は居ない。澤山居つた兄弟が一疋も見えぬ。肝心の母親さへ姿を隱して仕舞つた。其上今迄の所とは違つて無暗に明るい。眼を明いて居られぬ位だ。果てな何でも容子が可笑いと、のそのそ這ひ出して見ると非常に痛い。吾輩は藁の上から急に笹原の中へ棄てられたのである。
漸くの思ひで笹原を這ひ出すと向ふに大きな池がある。吾輩は池の前に坐つてどうしたらよからうと考へて見た。別に是といふ分別も出ない。暫くして泣いたら書生が又迎に來てくれるかと考へ付いた。
ニヤー、ニヤーと試みにやつて見たが誰も來ない。其内池の上をさらさらと風が渡つて日が暮れかゝる。腹が非常に減つて來た。泣き度くても聲が出ない。仕方がない、何でもよいから食物のある所迄あるかうと決心をしてそろりそろりと池を左りに廻り始めた。
どうも非常に苦しい。そこを我慢して無理やりに這つて行くと漸くの事で何となく人間臭い所へ出た。此所へ這入つたら、どうにかなると思つて竹垣の崩れた穴から、とある邸内にもぐり込んだ。
縁は不思議なもので、もし此竹垣が破れて居なかつたなら、吾輩は遂に路傍に餓死したかも知れんのである。一樹の蔭とはよく云つたものだ。
此垣根の穴は今日に至る迄吾輩が隣家の三毛を訪問する時の通路になつて居る。偖邸へは忍び込んだものゝ是から先どうして善いか分らない。
其内に暗くなる、腹は減る、寒さは寒し、雨が降つて來るといふ始末でもう一刻も猶豫が出來なくなつた。仕方がないから兎に角明るくて暖かさうな方へ方へとあるいて行く。
今から考へると其時は既に家の内に這入つて居つたのだ。こゝで吾輩は彼の書生以外の人間を再び見るべき機會に遭遇したのである。第一に逢つたのがおさんである。
是は前の書生より一層亂暴な方で吾輩を見るや否やいきなり頸筋をつかんで表へ抛り出した。いや是は駄目だと思つたから眼をねぶつて運を天に任せて居た。
然しひもじいのと寒いのにはどうしても我慢が出來ん。吾輩は再びおさんの隙を見て臺所へ這ひ上つた。すると間もなく又投げ出された。吾輩は投げ出されては這ひ上り、這ひ上つては投げ出され、何でも同じ事を四五遍繰り返したのを記憶して居る。其時におさんと云ふ者はつくづくいやになつた。
此間おさんの三馬を偸んで此返報をしてやつてから、やつと胸の痞が下りた。吾輩が最後につまみ出され樣としたときに、此家の主人が騷々しい何だといひながら出て來た。
下女は吾輩をぶら下げて主人の方へ向けて此宿なしの小猫がいくら出しても出しても御臺所へ上つて來て困りますといふ。主人は鼻の下の黑い毛を撚りながら吾輩の顔を暫く眺めて居つたが、やがてそんなら内へ置いてやれといつたまゝ奥へ這入つて仕舞つた。主人は餘り口を聞かぬ人と見えた。
下女は口惜しさうに吾輩を臺所へ抛り出した。かくして吾輩は遂に此家を自分の住家と極める事にしたのである。