WEBデザインの勉強

WEB制作初心者が1から勉強するブログ。

スクロールバーのデザインを変更したり惰性スクロールが実装できるjQueryプラグインNiceScroll

github.com

GitHubからファイルを落としてくる。
ファイルを開き
jquery.nicescroll.js」もしくは「jquery.nicescroll.min.js」を
取り出し読みこむ

HTML

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>NiceScroll</title>
  <style>
    .test {
      padding-top: 1000px;
    }
    .end {
      padding-top: 1000px;
    }
  </style>
  <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
  <script src="js/jquery.nicescroll.min.js"></script>
  <script src="js/script.js"></script>
</head>
<body>
  <div class="content">
    <h1>NiceScroll</h1>
    <p>スクロールバーのデザインを変更したり惰性スクロールが実装できます。</p>
    <p>下にスクロールしてください。</p>
    <p></p>
    <p class="test">スクロールテスト</p>
    <p class="end">スクロールおわり</p>
  </div>
</body>
</html>

JS

$(function() {
  $("body").niceScroll({
    cursorcolor: "#333",//スクロールバーの色
    cursoropacitymin: 0.3,//スクロールバーがアクティブじゃない時の不透明度
    cursoropacitymax: 1,//スクロールバーがアクティブの時の不透明度
    cursorwidth: 10,//スクロールバーの太さ
    cursorborder: "1px solid #ccc",//スクロールバーのボーダーのCSS
    cursorborderradius: "10px",//スクロールバーの角丸半径
    scrollspeed: 50,//スクロールスピード
    mousescrollstep: 30,//マウスホイールのスクロール速度
    touchbehavior: true,//デスクトップコンピュータでタッチデバイスのようなスクロール
    hwacceleration:true//スクロール加速
  });
});

もっとカスタマイズしたい場合
jQuery custom scrollbar demo