67

JS フレームワークを使用せずに、古いバージョンのレガシー コードを使用せずに、一般的なブラウザーの最新バージョンのみをサポートする、マウスホイール イベント用のクリーンで優れた JavaScript が必要です。

Mousewheel イベントについては、こちらでうまく説明されています。現在の最新バージョンのブラウザーで単純化するにはどうすればよいですか?

すべてのブラウザーにアクセスしてテストできるわけではないので、caniuse.comは私にとって大きな助けになります。残念ながら、マウスホイールについては言及されていません。

Derek のコメントに基づいて、このソリューションを作成しました。すべてのブラウザで有効ですか?

someObject.addEventListener("onwheel" in document ? "wheel" : "mousewheel", function(e) {
  e.wheel = e.deltaY ? -e.deltaY : e.wheelDelta/40;
  // custom code
});
4

3 に答える 3

56

これについて説明し、例を示した記事を次に示します。

http://www.sitepoint.com/html5-javascript-mouse-wheel/

関連するコードから、画像のサイズ変更に関する特定の例を除いたもの:

var myitem = document.getElementById("myItem");
if (myitem.addEventListener)
{
    // IE9, Chrome, Safari, Opera
    myitem.addEventListener("mousewheel", MouseWheelHandler, false);
    // Firefox
    myitem.addEventListener("DOMMouseScroll", MouseWheelHandler, false);
}
// IE 6/7/8
else
{
    myitem.attachEvent("onmousewheel", MouseWheelHandler);
}

function MouseWheelHandler(e)
{
    // cross-browser wheel delta
    var e = window.event || e; // old IE support
    var delta = Math.max(-1, Math.min(1, (e.wheelDelta || -e.detail)));

    return false;
}
于 2014-09-26T20:27:42.777 に答える