スクロールバーをなめらかに＆見た目も変えられるjQueryプラグイン「Nicescroll.js」

2021.09.10

スクロールバーを動かしたときにふわっと余韻を残して止まるページを見て前からいいなと思っていたので使ってみることにしました
いくつかやり方があるようですが今回見つけたのは「Nicescroll.js」というプラグインで、使いやすくて良かったのでメモ

Nicescroll.js　公式サイト

https://nicescroll.areaaperta.com/
nicescroll.areaaperta.com

公式サイトに使い方とデモが載っていましたが
2022.08現在アクセスが出来ない状態になっています
なので
こちらの配布ページにある緑色の「code」ボタンから
zipファイルをダウンロードしてください

GitHub - inuyaksa/jquery.nicescroll: nicescroll plugin for jquery - scrollbars like iphone/ipad
github.com

とりあえず必要なのは
jquery.nicescroll.min.js
なので　フォルダに入れてリンクさせます（jQuery本体も忘れずに）
※これはルート直下に入れてます

<script src="https://code.jquery.com/jquery-2.2.3.min.js"></script>
<script src="jquery.nicescroll.min.js"></script>

あとは実行のためのコードを入れるだけ

基本のコード

/*ページにscriptタグで直接書く場合*/
<script type="text/javascript">
$(function() {  
 $("body").niceScroll();
}); 
</script>

最も基本のコードはこれ　見た目はこんな感じに

この初期値でもいい感じです
さらにオプションを付けることもできます

オプションいろいろ

cursorcolor…カーソルの色
cursorwidth…カーソルの幅
background…背景色
cursorborder…カーソルのボーダー
cursorborderradius…カーソル角のまるみ
cursoropacitymin…カーソルの動きを止めた時の透明度。デフォルトでは動きを止めた時にカーソルは消えるのですが1までの値を指定できます

こんなふうに設定すると↓

<script type="text/javascript">
$(function() {  
    $("body").niceScroll({
　        cursorcolor:"#A5C552",　
          cursorwidth:"16px",　
　        background:"rgba(249,221,31,0.4)",
　        cursorborderradius:0,
　        cursoropacitymin:0.4,
  });
}); 
</script>

こんな感じに

以上NiceScrollの使い方です
見た目としては　少し細めにするとスマートかなと
今はマウスホイールがあって　スクロールバーを掴むという動作も少なくなってきていると思うので
しかしここでスマホの問題が

スマホはないほうがいいかも

というのは　スマホだとなんかカクカクした動きになってしまうのです
もともと慣性スクロールになっているからでしょうか？
回避方法もあるのかもしれませんが　ひとまず私はPCのみ設置することにしました

if(!navigator.userAgent.match(/(iPhone|iPad|iPod|Android)/)){
//このカッコの中はスマホのとき無効

$(function() {  
    $("body").niceScroll({
　        cursorcolor:"#A5C552",　
          cursorwidth:"16px",　
　        background:"rgba(249,221,31,0.4)",
　        cursorborderradius:0,
　        cursoropacitymin:0.4,
  });
}); 

}

スクロールバーの見た目をPCとスマホで揃えたい場合は、スマホだけcssで変えてしまうのもありですね

コメント