memocarilog

スクロールする時に少し余韻を残してスクロールするようにするjQueryのプラグインです。ページ全体だけでなく、ページの一部にのみ使う事も可能です。最新記事のボックスなどに使ってみたいと思いました。

（！ご注意：こちらの記事では記事を書いた当時の使用方法をご紹介しております。現在の使い方などとは違っておりますので、ご使用の際はプラグイン配布元の使用方法をご参考いただくことをおすすめします。）

divだけでなくフレームにも対応しています。

配布先とデモ

配布先：inuyaksa / jquery.nicescroll
上の方の”zip”というボタンをクリックでデモファイルも入った一式のセットがダウンロードできます。jquery.nicescroll.jsの項目かjquery.nicescroll.min.jsの項目でスクリプトのみのダウンロードができます。

使用方法

ヘッド内で下記のようにjQuery本体とプラグインの読み込みをします。

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

■ページ全体に使用する場合は続けてヘッド内に下記のように記入します。

<script>
$(document).ready(
  function() {  
    $("body").niceScroll();
  }
);
</script>

■部分的に使用する場合は続けてヘッド内に下記のように記入します。

<script>
$(document).ready(
  function() {  
    $("#適用する要素").niceScroll();
  }
);
</script>

■部分的に使用し、スクロールバーの色を変更する場合は続けてヘッド内に下記のように記入します。

<script>
$(document).ready(
  function() {  
    $("#適用する要素").niceScroll({cursorcolor:"#00F"});
  }
);
</script>

オプション

オプションを設定してスクロールバーのデザインやスクロールのスピード等を変更できます。
※グーグル翻訳でなんとなく意訳していますので間違いがあるかもしれません。詳細は配布サイトをご参照下さい。

. cursorcolor
スクロールバーの色の変更デフォルトは “#000000”

. cursoropacitymin
スクロールバーが非アクティブの場合の不透明度。デフォルトは非表示

. cursoropacitymax
スクロールバーがアクティブな場合の不透明度。デフォルトは完全な不透明

. cursorwidth
スクロールバーの幅。デフォルトは5

. cursorborder
スクロールバーのボーダーのcssの指定。デフォルトは “1px solid #fff”

. cursorborderradius
スクロールバーの角丸半径。デフォルトは”4px”

. zindex – change
スクロールバーのdivのz-indexの値。デフォルト値は9999

. scrollspeed
スクロールスピード。デフォルト値は60

. mousescrollstep
マウスホイールのスクロール速度。デフォルト値は48

. touchbehavior
デスクトップコンピュータでタッチデバイスのようなスクロール。デフォルトは false

. hwacceleration
スクロールを加速、デフォルトはtrue

. boxzoom
ボックスのコンテンツのズームを可能にする。デフォルトはfalse

. dblclickzoom
boxzoom=trueの時のみ設定可能。ボックス上でダブルクリックする。

. gesturezoom
boxzoom=truの時とタッチでバイスの場合設定可能。アクティブにズーム、デフォルトはtrueです。

. grabcursorenabled
touchbehavior = trueの場合に”grab”アイコンを表示。デフォルトはtrue

. autohidemode
スクロールバーの非表示の仕方

. background
cssの背景を変更できる。デフォルトは空

. iframeautoresize
フレームを読み込んだ時にリサイズする。デフォルトはtrue

. cursorminheight
スクロールバーの最小の高さを設定。デフォルトは20px