23

更新Davidが提案した作業修正（以下を参照）：

交換

    $('.scrollMe').bind("mousewheel DOMMouseScroll", ...)

と

    $('.scrollMe').bind("mousewheel DOMMouseScroll MozMousePixelScroll", ...)

元の投稿

Firefox 16.0.2 (最新) では、「mousewheel / DOMMouseScroll」イベントをバインドするときに問題が発生します。マウス ポインターが対象の div の上にあるときにマウスホイールでスクロールすると、ウィンドウもスクロールしますが、明らかにこれは望ましくありません。

伝播を停止する方法などをいくつか追加してみましたが、何もうまくいかないようです。

Javascript コード:

    $(document).ready(function() {
            $('.scrollMe').bind("mousewheel DOMMouseScroll", function(e) {
                e.stopImmediatePropagation();
                e.stopPropagation();
                e.preventDefault();

                var delta = parseInt(e.originalEvent.wheelDelta || -e.originalEvent.detail);

                $(this).empty();    
                return false;
            });
    });

実際の動作を確認するには、以下の jsFiddle リンクをたどってください。サンプル ページでは、マウス ポインターを赤いボックスの div 内に置き、マウスのスクロール ホイールを使用します。Firefox は初めて (予期せず) 親ウィンドウをスクロールしますが、他のブラウザーはスクロールしません。

jsFiddle コード例

特異なのは、バインドされた要素でイベントを発生させると、Firefox が動作を繰り返さないことです。つまり、ページのスクロールが停止します。ただし、後で手動でページをスクロールして再試行すると、この動作が繰り返されます。

これは IE9 と Chrome でもテストしましたが、これらのブラウザーではこの問題を検出できませんでした (ウィンドウが予期せずスクロールしないことを意味します)。 )

これは本当に Firefox のバグですか? または、ページのウィンドウをスクロールせずにマウスホイール イベントをキャッチするのと同じ効果を達成するための他の解決策を知っている場合は、お気軽に回答してください!

4

4 に答える 4

20

FF 16.01 OSX でタッチパッドを使用してこのバグを再現することはできません (Fiddle は正常に動作します) が、 MozMousePixelScrollという別の mozilla 固有のイベントがあることは知っています。あなたもそれを巻き込んでみたいと思うかもしれません。

MDN にも詳しい情報があります: https://developer.mozilla.org/en-US/docs/DOM/DOM_event_reference/DOMMouseScroll

e.preventDefault()補足として、デフォルトのアクションを使用して停止するだけで十分であり、伝播も停止する必要はないと思います(他の IE 固有のバグがない限り)。

于 2012-11-07T16:55:56.963 に答える
5

https://developer.mozilla.org/en-US/docs/DOM/DOM_event_reference/DOMMouseScrollを読む と、MozMousePixelScroll DOMMouseScroll は firefox 16 以前用だったようです。Firefox > 17 の場合、wheelイベントを使用します。

$(document).ready(function() {
        $('.scrollMe').bind("wheel mousewheel", function(e) {
            e.preventDefault();

            var delta = parseInt(e.originalEvent.wheelDelta || -e.originalEvent.detail);

            $(this).empty();    
            return false;
        });
});
于 2014-04-11T14:38:26.153 に答える
1

この質問に対するこの回答には、私が見つけた最もブラウザと互換性のあるソリューションがあります。

スクロール方向を検出する方法

 $('#elem').on( 'DOMMouseScroll mousewheel', function ( event ) { 
    if( event.originalEvent.detail > 0 || event.originalEvent.wheelDelta < 0 ) { //alternative options for wheelData: wheelDeltaX & wheelDeltaY
        //scroll down
        console.log('Down');
      } else {
        //scroll up
        console.log('Up');
      }
      //prevent page fom scrolling
      return false;
    });
于 2016-07-11T13:12:11.113 に答える