4

jQuery マウスホイール プラグインを使用して、左右のホイールスピンごとに異なるアクションを実行しています。

Apple Magic Mouse の水平ホイール スクロールは、2 本の指を使用してページを左右にスクロールする、ほとんどのラップトップのトラックパッドと同じ効果があります。

そして、左右のスクロールのアクションは、履歴のページを前後に動かします。これは、すべての主要なブラウザー (Safari、Chrome、Opera、および Firefox) で発生します。

そのためpreventDefault、水平 (deltaX) スクロールでのみスクロールする必要があります。

垂直も無効にしないと、デフォルトの水平スピンを無効にすることはできません。

ここに問題を再現するフィドルがあります。アクセスして、水平マウスホイールまたはトラックパッドの水平スクロールを起動してください。

http://jsfiddle.net/YfwXw/

$(document).mousewheel(function(event, delta, deltaX, deltaY) {
    if (deltaX > 10){
        $(".square").addClass("animation");
    }else if(deltaX < -10){
        $(".square").removeClass("animation");
    }
    if (deltaY != 0){
        //Anything that makes vertical wheelscroll keeps normal
    }
    // I have to preventDefault only the horizontal scroll, otherwise page will go back or go forward in history
    event.preventDefault();
});

私の問題をよりよく理解するのに役立つコメントをコード内に入れていることがわかります。

基本的に私が必要とするのは、preventDefault水平方向のホイール アクションと、デフォルトの垂直方向のホイールを維持することだけです。

成功せずに解決策を探すのに 30 時間以上かかったので、助けていただければ幸いです。

Nicklas Nygren の回答に基づくソリューション 99% の新しいフィドル。

http://jsfiddle.net/9VbgF/

if (deltaY == 0){
    event.preventDefault();
}
4

1 に答える 1