jquery.mousewheel.jsのマウスホイールスクロール量を調整する方法
- WEB
- 投稿者：WEB上手 ｜ 2016年8月24日
この記事を簡単に書くと…
- JQueryの「JScrollPane」を使うことでスクロールバーをCSSで装飾
- 「jquery.mousewheel.js」でマウスホイールのスクロールに対応
- 記述を変更することでマウスホイールのスクロール量を調整
WEBサイトやブログを制作する際に、スクロールバーをカスタマイズ（装飾）したいこともあるかと思います。そんな時、JQueryの「JScrollPane」を使うことで、簡単にスクロールバーにCSSでデザインを施すことができるようになります。
・「JScrollPane」公式サイト
http://jscrollpane.kelvinluck.com/
使い方の詳細は、他のサイトでも色々と紹介されていますので、そちらをご参考にしてみてください。今回は、マウスホイールに対応する方法と、マウスホイールのスクロール量を調整する方法をご紹介します。
「JScrollPane」をマウスホイールに対応させる
「JScrollPane」は初期の段階では、マウスホイールではスクロールしてくれません。その為、マウスホイールでもスクロールできるように「jquery.mousewheel.js」を読み込む必要があります。
・「jquery.mousewheel.js」のダウンロード
https://github.com/jquery/jquery-mousewheel
上記のページで「jquery.mousewheel.js」をダウンロードし、適用したいページのhead部分で「jquery.mousewheel.js」を読み込むだけで、「JScrollPane」のスクロール部分が、マウスホイールでスクロールするようになります。
「jquery.mousewheel.js」のスクロール量を調整する
「jquery.mousewheel.js」はデフォルトでは、マウスホイールで結構な量がスクロールしてしまいます。そこでマウスホイールのスクロール量を調整したいという方も多いかと思います。
その場合には、「jquery.mousewheel.js」をテキストエディタ等で開き、185行目の以下の記述を変更します。
event.deltaFactor = lowestDelta
例えば、スクロール量を減らしたい時
event.deltaFactor = lowestDelta/2
こうすることで、スクロール量が半分になります。
逆に一度にたくさんのスクロールをさせたい場合
event.deltaFactor = lowestDelta*1.5
これで、スクロール量は1.5倍になります。
旧バージョンの場合
以前の「jquery.mousewheel.js」の場合、記述がだいぶ異なっています。
旧バージョンの場合、62行目～76行目あたりに以下のような記述があるかと思います。
// Old school scrollwheel delta
if ( orgEvent.wheelDelta ) { delta = orgEvent.wheelDelta/120; }
こちらの120の数値を減らすと、スクロール量が増えて、数値を増やすとスクロール量が減ります。上記はIEの記述になりますので、Google Chromeなどのスクロール量を調整する場合には、以下の記述を変更します。
// Webkit
if ( orgEvent.wheelDeltaY !== undefined ) { deltaY = orgEvent.wheelDeltaY/120; }
if ( orgEvent.wheelDeltaX !== undefined ) { deltaX = -1*orgEvent.wheelDeltaX/120; }
関連記事
こちらの記事も読まれています
コメントする