ページ内のスクロールバーを見やすく且つ異なるブラウザ間でも同じデザインにする「SimpleBar」ライブラリの利用方法
CSSのoverflowでスクロールバーを設置した際、ブラウザによってデザイン(見た目)が異なる。また(個人的には)、ChromeやEdgeはスクロールバーが見つけやすいが、Firefoxは見つけにくかったりする。これを何とかならないか調べたところ「SimpleBar」ライブラリが良さそう。以下に実装方法をメモ。
サンプル
https://taitan916.info/sample/SimpleBar/
SimpleBar
公式サイト
https://grsmto.github.io/simplebar/
CDN
CDNで使う場合は以下を記述する。
<script src="https://cdn.jsdelivr.net/npm/simplebar@6.2.7/dist/simplebar.min.js"></script> <link href="https://cdn.jsdelivr.net/npm/simplebar@6.2.7/dist/simplebar.min.css" rel="stylesheet">
利用方法
ソースコード
<style> .title{ font-weight: bold; } .contents{ width: 200px; overflow: auto; white-space: nowrap; height: 200px; border: 1px solid #ccc; margin-bottom: 20px; } </style> <div class="title">通常のスクロールバー</div> <div class="contents"> コンテンツ/コンテンツ/コンテンツ/コンテンツ/コンテンツ<br> コンテンツ/コンテンツ/コンテンツ/コンテンツ/コンテンツ<br> コンテンツ/コンテンツ/コンテンツ/コンテンツ/コンテンツ<br> コンテンツ/コンテンツ/コンテンツ/コンテンツ/コンテンツ<br> コンテンツ/コンテンツ/コンテンツ/コンテンツ/コンテンツ<br> コンテンツ/コンテンツ/コンテンツ/コンテンツ/コンテンツ<br> コンテンツ/コンテンツ/コンテンツ/コンテンツ/コンテンツ<br> コンテンツ/コンテンツ/コンテンツ/コンテンツ/コンテンツ<br> コンテンツ/コンテンツ/コンテンツ/コンテンツ/コンテンツ<br> コンテンツ/コンテンツ/コンテンツ/コンテンツ/コンテンツ<br> コンテンツ/コンテンツ/コンテンツ/コンテンツ/コンテンツ<br> </div> <div class="title">SimpleBar</div> <div class="contents" data-simplebar> コンテンツ/コンテンツ/コンテンツ/コンテンツ/コンテンツ<br> コンテンツ/コンテンツ/コンテンツ/コンテンツ/コンテンツ<br> コンテンツ/コンテンツ/コンテンツ/コンテンツ/コンテンツ<br> コンテンツ/コンテンツ/コンテンツ/コンテンツ/コンテンツ<br> コンテンツ/コンテンツ/コンテンツ/コンテンツ/コンテンツ<br> コンテンツ/コンテンツ/コンテンツ/コンテンツ/コンテンツ<br> コンテンツ/コンテンツ/コンテンツ/コンテンツ/コンテンツ<br> コンテンツ/コンテンツ/コンテンツ/コンテンツ/コンテンツ<br> コンテンツ/コンテンツ/コンテンツ/コンテンツ/コンテンツ<br> コンテンツ/コンテンツ/コンテンツ/コンテンツ/コンテンツ<br> コンテンツ/コンテンツ/コンテンツ/コンテンツ/コンテンツ<br> </div> <script src="https://cdn.jsdelivr.net/npm/simplebar@6.2.7/dist/simplebar.min.js"></script> <link href="https://cdn.jsdelivr.net/npm/simplebar@6.2.7/dist/simplebar.min.css" rel="stylesheet">
適用させたい要素に対して「data-simplebar」を付与すること。
JavaScriptやjQueryで個別に適用させたい場合はドキュメントを参照すること。
関連記事
-
-
JavaScriptでlocalStorageを簡単に操作できる「store.js」ライブラリの利用方法
以前Dexie.jsを利用してIndexedDBを取り扱う方法をメモしたが、今回 ...
-
-
JavaScriptにて「QRCode.js」ライブラリを利用してQRコードを生成する方法
PHPが使えない環境で動的にQRコードを生成したかった。以前にメモしたAPI等の ...
-
-
Push.jsを用いてプッシュ通知を実装&Web Audio APIで通知音も鳴らす方法
プッシュ通知(デスクトップ通知)を実装してみたい。また、通知の際は分かりやすいよ ...
-
-
formで複数選択可能なセレクトメニュー(プルダウン)を実装する方法(select2)
フォームで複数選択可能なセレクトボックス(プルダウン)を実装したい。ただHTML ...
-
-
JavaScriptで画像読み込み完了のタイミングを検知する「imagesLoaded」ライブラリの利用方法
大き目のサイズの画像をページに設置すると読み込み完了まで時間がかかる。その画像が ...