Optiscrollは、軽量で高度に最適化されたカスタマイズ性に優れたモダンなスクロールバーを実装できるJSライブラリです。9KBととっても軽いのがうれしいですね。縦横スクロールバーに対応しているほか、すべてのモダンブラウザ(IE9以上)をサポートしています。オプションもいろいろ用意されていたり、scrollToやscrollIntoViewといったアニメーションの設定も可能です。
カスタムイベントやAPIによるアニメーション
以下のページからOptiscrollのデモ動作を確認できます。
デモ
デモではシンプルなスクロールバーから、あらかじめスクロールバーを表示しているもの、縦横のスクロールバーを表示するものなど、いくつかの種類が用意されています。
scrollTo ( destX, destY [, duration] )、scrollIntoView (elem, [, duration, delta] )といったAPIを使用したアニメーションを設定することもできます。自分が指定した特定のポイントまでスクロールしてくれるので、コンテンツ内で特定の部分を効率よく見せたいときなんかに活用できそうですね。
カスタムイベントには、sizechange、scrollstart、scroll、scrollstop、scrollreachedgeなどが用意されているので、自サイトに合わせてカスタマイズしたい人にも最適です。
ほかにも、preventParentScroll、forceScrollbars、scrollStopDelay、maxTrackSize、minTrackSize……など、多彩なオプションが揃っています。
モダンでカスタマイズ性バツグンな軽量スクロールバーを実装したい人には、非常におすすめです。