実際に使う機会があるかは分かりませんが、ひょんなことから調べたので備忘録としてまとめ。
Webページのスクロールバーをカスタマイズする方法です。
普通ブラウザのスクロールバーは、グレーの四角形だと思いますが、Web ページによっては、この見た目がそぐわなくて美しくない！という場合があるかと思います。
そんな時に、このスクロールバーではなくもっとシンプルなスクロールバーを実装するためのライブラリがあります。
それがこちらの「SimpleBar」というライブラリです。
公式サイトはこちらから。
SimpleBar – Custom scrollbars made simple
http://grsmto.github.io/simplebar/
使い方はとても簡単で、まず simplebar.min.js と simplebar.css ファイルをダウンロードして、HTML の head 内に追加します。
もしくは、CDN でも配信しているので、こちらを記述しても OK です。
<link rel="stylesheet" href="./css/simplebar.css"> <script src="./js/simplebar.min.js"></script> <!-- または --> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/simplebar@latest/dist/simplebar.css"> <script src="https://cdn.jsdelivr.net/npm/simplebar@latest/dist/simplebar.min.js"></script>
ちなみに、React や Vue.js でも使えるようです。
あとは、スクロールを追加したい要素に対して data-simplebar を追加します。
サンプルコードは下記のとおりです。
<div data-simplebar>
<!-- 表示したい要素 -->
</div>
作業は以上です！
これでシンプルなスクロールバーが実装できます。
以上、ブラウザのスクロールバーをカスタマイズする方法でした。
折角調べたので、機会があれば是非実装してみたいと思います。
