web-dev-qa-db-ja.com

最新のブラウザでのマウスホイールイベント

マウスホイールイベント用のクリーンでナイスなJavaScriptを持ち、旧バージョンのレガシーコードなしで、JSフレームワークなしで最新バージョンの一般的なブラウザーのみをサポートしたいと思います。

マウスホイールイベントはうまく説明されています here 。ブラウザの現在の最新バージョンでそれを簡素化する方法は？

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

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

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

これは2018年の方法です：

window.addEventListener("wheel", event => console.info(event.deltaY));

ブラウザは、デルタに対して異なる値を返す場合があります（たとえば、Chromeは+120（スクロールアップ）または-120（スクロールダウン）を返します。記号を抽出し、効果的に+1/-1に変換します：

window.addEventListener("wheel", event => {
    const delta = Math.sign(event.deltaY);
    console.info(delta);
});

参照： [〜＃〜] mdn [〜＃〜] 。

25
Lucio Paiva

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

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

これはFirefoxで動作します、ChromeおよびEdgeも：

window.addEventListener("wheel", function(e) {
    var dir = Math.sign(e.deltaY);
    console.log(dir);
});
4
Iter Ator