スクロールバーのデザインや動きを変更したい時に便利なスクリプト 8

  • Posted on
  • Category : Tips
スクロールバーのデザインや動きを変更したい時に便利なスクリプト 8

スクリプトといってもほぼjQueryプラグインになりますが、ブラウザやOSによってデザインが異なるスクロールバーデザインを統一させたい時などに便利なスクリプトのまとめです。Chromeや古いIEなどのようにブラウザによってはCSSだけでスクロールバーのデザインを変更できたりはしますが、記述がバラバラだったりしますし、ひと通りのブラウザでとなるとやはりこういったもので対応するのが無難だと思います。また、スクリプトによっては慣性スクロールを実装したり複数の領域を同時にスクロールできるようにするといったデザイン以外の部分でもカスタマイズできるものもあります。

jQuery custom content scroller

jQuery custom content scroller

スクロールバーのデザインや動きをカスタマイズすることができるjQueryプラグインで、スクロール量・方向・イージング・マウスオン時に出現など様々なオプションがあります。
また、デモも豊富に用意されており、デフォルトで様々なデザインのスタイルが同梱されていたりもするので、気に入ったものがあればそのままそのデザインで実装することができます。

perfect-scrollbar

perfect-scrollbar

こちらも同じくjQueryプラグインで、デザインを独自のものに変更できることやコンテンツ領域が変化したらそれにあわせてスクロールバーの位置や大きさも変化してくれるのが特徴です。

jScrollPane

jScrollPane

同じくjQueryプラグインでCSSを使ってスクロールバーのデザイン変更なども可能です。
オプションでは矢印ボタンの有無を指定したり、矢印ボタンにマウスオンした時に自動スクロールするよう設定できたりします。

jQuery.NiceScroll

jQuery.NiceScroll

慣性スクロールを実装できるjQueryプラグインで、iPhoneのようにスクロールしている時にだけスクロールバーが表示され、スクロールが終わると消えていくという動きも特徴的です。
(PCの場合は非表示になっているスクロールバーが、マウスオン時にも一瞬表示されます)
また、その領域を拡大させることができるズーム機能や見た目を変更できるオプションなどが多数用意されています。

Trackpad Scroll Emulator

Trackpad Scroll Emulator

こちらは慣性スクロールではないですが、見た目などに関しては上と同じような感じのスクロールバーを実装できるjQueryプラグインで、ページではOS X風という形で紹介されています。

jQuery.scrollpanel

jQuery.scrollpanel

目立った機能はない感じのjQueryプラグインですが、CSSで見た目をカスタマイズすることができます。

syncscroll

syncscroll

これまでのもとは違ったタイプのもので、2箇所の領域を同時にスクロールさせることができるスクリプトです。
こちらはjQueryは必要なく、実装方法も同時にスクロールさせたい箇所に同じname属性を指定するだけと容易です。

Scrollgress

Scrollgress

こちらもちょっと変わったタイプのjQueryプラグインで正確にはスクロールバーではないですが、スクロールするとページ上部にプログレスバーが表示され、スクロール量に応じてバーが伸びていくというものになります。

Back to Top

スクロールバーのデザインや動きを変更したい時に便利なスクリプト 8

スクロールバーのデザインや動きを変更したい時に便利なスクリプト 8

/ Tips

NxWorld

Sorry... doesn't support your browser

To get the best possible experience using our site we recommend that you upgrade to a modern web browser.NxWorldではご利用中のブラウザサポートはしていません。
Internet Explorerのアップグレード行う、もしくはその他のブラウザを使用しての閲覧をお願いします。