Optiscroll

JavaScript

縦横に対応したカスタマイズ性に優れたモダンなスクロールバー「Optiscroll」

Optiscrollは、軽量で高度に最適化されたカスタマイズ性に優れたモダンなスクロールバーを実装できるJSライブラリです。9KBととっても軽いのがうれしいですね。縦横スクロールバーに対応しているほか、すべてのモダンブラウザ(IE9以上)をサポートしています。オプションもいろいろ用意されていたり、scrollToやscrollIntoViewといったアニメーションの設定も可能です。

カスタムイベントやAPIによるアニメーション

デモ

デモではシンプルなスクロールバーから、あらかじめスクロールバーを表示しているもの、縦横のスクロールバーを表示するものなど、いくつかの種類が用意されています。

scrollTo ( destX, destY [, duration] )、scrollIntoView (elem, [, duration, delta] )といったAPIを使用したアニメーションを設定することもできます。自分が指定した特定のポイントまでスクロールしてくれるので、コンテンツ内で特定の部分を効率よく見せたいときなんかに活用できそうですね。

カスタムイベントには、sizechange、scrollstart、scroll、scrollstop、scrollreachedgeなどが用意されているので、自サイトに合わせてカスタマイズしたい人にも最適です。

ほかにも、preventParentScroll、forceScrollbars、scrollStopDelay、maxTrackSize、minTrackSize……など、多彩なオプションが揃っています。

Optiscroll

関連記事

  1. Toolgif

    JavaScript

    GIFアニメーションによるツールチップを実装できる「Toolgif」

    ToolgifはGIFアニメーションを活用したツールチップを実装するこ…

  2. jQuery Equal Height

    JavaScript

    異なる要素の高さを揃えてくれる「jQuery Equal Height」

    jQuery Equal Heightは、異なる要素の高さをキレイに揃…

  3. JavaScript

    カスタマイズしやすい軽量のツールチップを実装できるjQueryプラグイン「TinyTip」

    TinyTipはカスタマイズしやすいツールチップを実装することができる…

  4. flatpickr

    JavaScript

    超軽量で使い方もカンタンな日付ピッカー「flatpickr」

    flatpickrはjQueryなどのライブラリに依存することなく動作…

  5. simple-calendar

    JavaScript

    イベント設定もできるシンプルなカレンダー実装「simple-calendar」

    simple-calendarは、イベント設定も可能なシンプルなカレン…

最近の記事

  1. USB-2H401BKN
  2. Dyson Pure Cool Me
  3. ルック セレクション
  4. シルキーウインドモバイル

アーカイブ

PAGE TOP