[JS]実装が簡単で、操作も快適!スクロールに対応したコンテンツを実装できる超軽量ライブラリ -SimpleBar

スクロールバーをカスタマイズしてコンテンツを設置できるJavaScriptのほとんどは、スクロールの挙動が独自だったりします。ブラウザのネイティブのスクロール操作を使用し、快適に動作するコンテンツを実装できるライブラリを紹介します。

5kBの超軽量で、他スクリプトの依存はありません。また、IE9+対応なのも安心ですね。

サイトのキャプチャ

SimpleBar
SimpleBar -gitHub

SimpleBarの特徴

SimpleBarの特徴
  • デフォルトのスクロールバーをカスタマイズ
    同系統のスクリプトの多くはJavaScriptでスクロールバーを模倣しますが、当スクリプトはデフォルトのスクロールバーを使用するので、パフォーマンスを損なうことはありません。
  • スクロールバーのデザイン
    スクロールバーはCSSでスタイルを簡単に変更できます。
  • 5kBの超軽量スクリプト
    他のスクリプトの依存はなく、超軽量の単体で動作するスクリプトです。
  • ネイティブのスクロール
    スクロール操作にJavaScriptは使用せず、ネイティブのスクロール操作が可能です。
  • サポートブラウザ
    すべてのモダンブラウザとIE9+をサポートしています。
SimpleBarのサポートブラウザ

SimpleBarのデモ

デモページでは、スクロールバーを設置したコンテンツを試せます。

デモのキャプチャ

デモページ

スクロール操作はブラウザのネイティブなので、非常に快適です。

デモのアニメーション

デモのアニメーション
※マウスのホイールでスクロールしています。

SimpleBarの使い方

Step 1: 外部ファイル

当スクリプトとスタイルシートを外部ファイルとして記述します。

CDNでも配信されています。

Step 2: HTML

スクロールバーを設置する要素にdata-simplebarを加えます。

Step 3: JavaScript

スクリプトを初期化し、実行します。

sponsors

top of page

©2024 coliss