ScrollBooster

JavaScript

ドラッグしながらスクロールするライブラリ「ScrollBooster」

ScrollBoosterはドラッグしながらスクロールする機能を実装できるライブラリです。テーブルや画像などのコンテンツを任意の領域内でドラッグスクロールしながら見せることができるので、使いどころによってはとても便利な機能ですね。

ScrollBooster

デモ

デモではテーブルや画像といったコンテンツにこの機能が実装されています。例えば、一番上のテーブルでは、テーブル内にカーソルを持っていくとカーソルが十字の矢印に切り替わります。この状態で左右にドラッグすることで横にスクロールしていくことが可能です。

特定の領域内にたくさんのデータを詰め込みたい場合に役立つ機能ですね。

同様に、画像のデモでは左右だけではなく上下のドラッグスクロールもできるようになっています。ユーザーに拡大画像を特定の領域内でスクロールしながらじっくり見せたい場合にはとても便利な機能です。

オプションには、viewport、content、handle、bounce、textSelection、friction、bounceForce、emulateScroll、onUpdateといった項目のセッティングが可能になっています。

その他、メソッドにはsetPosition、updateMetrics、getUpdate、destroyが用意されています。

サポートされているブラウザは、IE 11、Edge、Chrome、Firefox、Safari。ライセンスはMITとのこと。

ScrollBooster

関連記事

  1. JavaScript

    マウスオーバーなどで画像を拡大してくれるシンプルなjQueryプラグイン「jQuery Zoom」

    マウスオーバーなどで画像を拡大してくれるシンプルなjQueryプラグイ…

  2. stickyTableColumns

    JavaScript

    水平(左右)にスライドできるテーブル実装「stickyTableColumns」

    stickyTableColumnsは、データ量の多い表をページで表現…

  3. jQuery Video Extend

    JavaScript

    動画をチャプターごとに区切れる「jQuery Video Extend」

    jQuery Video Extendは動画をチャプターごとに区切った…

  4. Responsive Nav

    JavaScript

    レスポンシブ対応の軽量なナビゲーションを実装できる「Responsive Nav」

    レスポンシブ対応のナビゲーションを実装できる「Responsive N…

  5. awNotices

    JavaScript

    スタート・ストップ機能がついたシンプルなjQueryニュースティッカー「awNotices」

    awNoticesはスタート・ストップ機能がついたシンプルに切り替わる…

  6. ShowMore.js

    JavaScript

    長いコンテンツを折りたためるjQueryプラグイン「ShowMore.js」

    ShowMore.jsは長いコンテンツを折りたたんで表示・非表示を簡単…

最近の記事

  1. Anker PowerWave 10 Pad & Stand セット
  2. ミノン メン 薬用全身シャンプー

アーカイブ

PAGE TOP