[JS]実装が簡単で、操作も快適！スクロールに対応したコンテンツを実装できる超軽量ライブラリ -SimpleBar
Post on:2018年8月7日
sponsors
スクロールバーをカスタマイズしてコンテンツを設置できるJavaScriptのほとんどは、スクロールの挙動が独自だったりします。ブラウザのネイティブのスクロール操作を使用し、快適に動作するコンテンツを実装できるライブラリを紹介します。
5kBの超軽量で、他スクリプトの依存はありません。また、IE9+対応なのも安心ですね。
SimpleBarの特徴
-
- デフォルトのスクロールバーをカスタマイズ
- 同系統のスクリプトの多くはJavaScriptでスクロールバーを模倣しますが、当スクリプトはデフォルトのスクロールバーを使用するので、パフォーマンスを損なうことはありません。
-
- スクロールバーのデザイン
- スクロールバーはCSSでスタイルを簡単に変更できます。
-
- 5kBの超軽量スクリプト
- 他のスクリプトの依存はなく、超軽量の単体で動作するスクリプトです。
-
- ネイティブのスクロール
- スクロール操作にJavaScriptは使用せず、ネイティブのスクロール操作が可能です。
-
- サポートブラウザ
- すべてのモダンブラウザとIE9+をサポートしています。
SimpleBarのデモ
デモページでは、スクロールバーを設置したコンテンツを試せます。
スクロール操作はブラウザのネイティブなので、非常に快適です。
デモのアニメーション
※マウスのホイールでスクロールしています。
SimpleBarの使い方
Step 1: 外部ファイル
当スクリプトとスタイルシートを外部ファイルとして記述します。
|
1 2 3 4 5 6 7 8 9 10 |
<head> ... <link rel="stylesheet" href="simplebar.css" /> </head> <body> ... コンテンツ ... <script src="simplebar.js"></script> </body> |
CDNでも配信されています。
|
1 2 3 4 5 6 7 8 9 10 |
<head> ... <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/simplebar@latest/dist/simplebar.css"> </head> <body> ... コンテンツ ... <script src="https://cdn.jsdelivr.net/npm/simplebar@latest/dist/simplebar.js"></script> </body> |
Step 2: HTML
スクロールバーを設置する要素にdata-simplebarを加えます。
|
1 |
<div data-simplebar></div> |
Step 3: JavaScript
スクリプトを初期化し、実行します。
|
1 2 3 |
new SimpleBar(document.getElementById('myElement'), { autoHide: false }) |
sponsors
