カラー・位置・サイズを調節できるスクロールバーを追加することのできるプラグイン「slimScroll」を紹介します。
jQueryプラグイン「slimScroll」
このプラグインを使えば、指定した要素にスクロールバーを追加することができます。
以下のようなさまざまなオプションが用意されているので、おすすめ!
- バーの幅
- 位置
- 高さ
- カラー
- 透明度
- スクロール・イベント
- ……など。
それではデモページをスクロールしてみてください。
「slimScroll」のデモ
デモのソース(HTML + jQuery)
< meta name = "description" content = "slimScroll のデモでーす。" > |
< title >slimScroll - jQuery Plugin Demo</ title > |
< h1 >slimScroll のデモでーす。</ h1 > |
< p >五月雨をあつめて早し最上川< br />(さみだれを あつめてはやし もがみがわ)</ p > |
< p >夏草や兵どもが夢の跡< br />(なつくさや つわものどもが ゆめのあと)</ p > |
< p >閑さや岩にしみ入る蝉の声< br />(しずかさや いわにしみいる せみのこえ)</ p > |
< p >古池や蛙飛びこむ水の音< br />(ふるいけや かはづとびこむ みずのおと)</ p > |
< p >荒海や佐渡によこたふ天河< br />(あらうみや さどによこたう あまのがわ)</ p > |
< script src = "//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js" ></ script > |
< script src = "jquery.slimscroll.min.js" ></ script > |
jsファイルのダウンロード、オプション詳細はこちらからどうぞ。