Nicescroll

2024年9月15日

みなさんこんにちは。
ケミストのWeb担当みやのです。

「Web」記事では、これまでに得たWebに関する知識を記録として残していきたいと思います。

今回は、ページの右端にあるスクロールバーを変更するプラグイン「Nicescroll」を試してみました。

スクロールバーの各部の名称

ノブ（つまみ）の名前はいろいろあるみたいですね。「おれのなまえは いっぱいあってな」

最近のマウスにはだいたいマウスホイールがついているので、スクロールバーを直接触ることはあんまりないような気もします。

Nicescrollを導入する

参考：しろあん手帖｜スクロールバーをなめらかに＆見た目も変えられるjQueryプラグイン「Nicescroll.js」

① ここからzipをダウンロード

② 解凍して出てきたjquery.nicescroll.min.jsを、jQueryより後で読み込む

<script src="https://code.jquery.com/jquery-3.6.1.min.js" integrity="sha256-o88AwQnZB+VDvE9tvIXrMQaPlFFSUTR+nldQm1LuPXQ=" crossorigin="anonymous"></script>

<script src="js/jquery.nicescroll.min.js"></script>

③ オプションを記述

$(function () {
  $("body").niceScroll({
    cursorcolor: "#ff1493",
    cursorwidth: "8px",
    cursorborder: "none",
    cursorborderradius: "4px",
    cursoropacitymin: 0.4,
    background: "#32bdeb"
    });
});

cursorcolorはサムの色
cursorwidthはサムの幅
cursorborderはサムの縁取りの線
cursorborderradiusはサムの角丸の半径
cursoropacityminは動かしていない時の透明度
backgroundはトラックの色
のようです。
オプションは他にもいろいろありました。

④ スマホ時は無効化しておく

if (!navigator.userAgent.match(/(iPhone|iPad|iPod|Android)/)) {
  $(function () {
    $("body").niceScroll({
      cursorcolor: "#ff1493",
      cursorwidth: "8px",
      cursorborder: "none",
      cursorborderradius: "4px",
      cursoropacitymin: 0.4,
      background: "#32bdeb"
    });
  });
}

iPhoneだと・・・

なんでスマホで無効化したのかというと、iPhoneでNicescrollを入れたら動きがガッタガタでとても使いづらかったからです。

どんな感じか見てみたい方はこちらからどうぞ。

まとめ

以前は::-webkit-scrollbarとか::-webkit-scrollbar-thumbとか::-webkit-scrollbar-trackとかを使うとiOSでもスクロールバーを変更することができたらしいです。

ダークモードで色を変えたりできないか試してみたのですができませんでした。白背景でも黒背景でも見えるように灰色にするといいんじゃないかなと思います。