jquery-mousewheel [plug-in][jQuery]

マウスホイールイベントを取得するjQueryプラグイン（ほかのプラグインと組み合わせて使うことが多い）です。
jQueryを使わなくてもマウスホイールイベントを取得することはできますが、ブラウザによっていろいろ違うので、めんどくさいです。
そういうわけで、jquery-mousewheelをつかうといろいろ楽になるので、便利です。
詳しく説明するととても長くなるので、ここではほんのさわりだけ説明します。
jqueryのプラグインなので、jQueryライブラリが読み込まれていることが前提です。

sample

点線枠内でマウスホイールを回転させると、変化が起こります（枠内にマウスポインタがないと反応しません）。

スマートデバイスには対応していません。

html

<div class="test">
  <span></span>
</div>

※黒い部分をダブルクリックするとソースを選択できるので、コピーして使ってください。

上のサンプルのhtmlはこんな感じです。
あくまで例なので、この限りではありません。

css

.test{
  position:relative;
  overflow:hidden;
  height:30px;
}
.test span{
  width:10px;
  height:10px;
  margin:10px 0;
  background:#f60;
  position:absolute;
  right:-10px;
}

※黒い部分をダブルクリックするとソースを選択できるので、コピーして使ってください。

上のサンプルのcssはこんな感じです。マウスホイールを動かすと現れるオレンジの■はspanタグです。
あくまで例なので、この限りではありません。

js

$(function() {
  $('.test').mousewheel(function(eo, delta, deltaX, deltaY) {
    if(deltaY < 0) {
      $('.test span').animate({right: '800px'},1000);
    } else {
      $('.test span').animate({right: '-10px'},800);
    }
  });
});

※黒い部分をダブルクリックするとソースを選択できるので、コピーして使ってください。

  1. 2行目：セレクター（ここではclass[test]）の上でのマウスイベントを取得。
    取得できる値はeo：イベントオブジェクト、delta：ホイールの回転方向（縦横関係なく）、deltaX：ホイールの回転方向（横スクロール）、deltaY:ホイールの回転方向（縦スクロール）
  2. 3～4行目：deltaY（縦方向にスクロールした時のホイールの回転方向）が-1（ホイールを手前に回転＝上から下へスクロール）のときの処理
  3. 5～6行目：逆方向のときの処理

この例では縦方向にしかスクロールしないので、変数deltaYだけを使用しました。
マウスホイールを動かすと、変数deltaYの値は手前に回転＝上から下へスクロールした時に-1、手前から向こうへ回転＝下から上へスクロールした時に1になります。
これを検知し、処理をさせています。
ちなみに、このとき変数deltaは、マウスホールが動いていればとにかく値が返ってくるので、-1か1になります。
変数deltaXは横方向に動いていないので、常に0になります。

このプラグインの活用の仕方については下の方にリンクをいくつか用意しましたので、参考にしてください。

このプラグインは汎用性が高いため、ほかのプラグインで一緒に提供される場合があります。
ホイールイベントでどうのこうのという動作があるjQueryプラグインにはたいてい、このプラグインがパッケージ化されています。
なお、複数のプラグインそれぞれにこのjquery-mousewheelが含まれていた場合、それぞれにこのプラグインのファイルが必要なわけではなく、一つあれば十分ですので、無駄にファイルを増やさないようにしましょう。

戻る

Top