JavaScript・PHPのサンプルやWordPressのテーマ・無料フォント、アフィリエイトやブログの運営方法等の紹介

jquery.mousewheel.jsのマウスホイールスクロール量を調整する方法

この記事を簡単に書くと…

  • JQueryの「JScrollPane」を使うことでスクロールバーをCSSで装飾
  • 「jquery.mousewheel.js」でマウスホイールのスクロールに対応
  • 記述を変更することでマウスホイールのスクロール量を調整

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; }

関連記事


コメントする

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA


This blog is kept spam free by WP-SpamFree.

Follow us on Twitter Subscribe RSS Follow us in feedly
NATURAL PRESS

関連リンク

このサイトについて

JavaScript・PHPのサンプルや参考リンク、WEBサイト(ホームページ)で使えるアイコンや写真等の素材をダウンロード出来ます。

他にも、無料で使えるブロガーやアフィリエイター向けの、WordPressマガジンテーマ「NATURAL PRESS」を公開しています。ダウンロードや更新情報は、こちらのサイトで公開しています。

また、「WEB上手」は全ページリンクフリーですのでご自由にリンクしていただけます。リンクしていただけますと嬉しいです。

WordPress Theme NATURAL PRESS by WEB-JOZU.com