【JavaScript】スクロールバーをカスタマイズする方法

村上 著者:村上

【JavaScript】スクロールバーをカスタマイズする方法

実際に使う機会があるかは分かりませんが、ひょんなことから調べたので備忘録としてまとめ。
Webページのスクロールバーをカスタマイズする方法です。

普通ブラウザのスクロールバーは、グレーの四角形だと思いますが、Web ページによっては、この見た目がそぐわなくて美しくない!という場合があるかと思います。
そんな時に、このスクロールバーではなくもっとシンプルなスクロールバーを実装するためのライブラリがあります。

それがこちらの「SimpleBar」というライブラリです。
公式サイトはこちらから。

SimpleBar – Custom scrollbars made simple
http://grsmto.github.io/simplebar/

 

使い方はとても簡単で、まず simplebar.min.jssimplebar.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>

ちなみに、ReactVue.js でも使えるようです。

あとは、スクロールを追加したい要素に対して data-simplebar を追加します。
サンプルコードは下記のとおりです。

<div data-simplebar>
    <!-- 表示したい要素 -->
</div>

作業は以上です!
これでシンプルなスクロールバーが実装できます。

 

以上、ブラウザのスクロールバーをカスタマイズする方法でした。
折角調べたので、機会があれば是非実装してみたいと思います。

  • この記事いいね! (0)

著者について

村上

村上 administrator