web-dev-qa-db-ja.com

firefox + jqueryマウスホイールスクロールイベントのバグ

[〜＃〜] update [〜＃〜]Davidによって提案された作業修正（以下を参照）：

取り替える

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

と

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

元の投稿

Firefox 16.0.2（最新）は、「マウスホイール/ 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固有であると推測しています。 （Firefoxなどのすべてのプラグインも無効にします）

これは本当にFirefoxのバグですか？（そうであれば、トリックを実行する可能性のあるクロスブラウザハックがあります）？または、ページのウィンドウをスクロールせずにマウスホイールイベントをキャッチするのと同じ効果を達成する他の解決策を知っている場合は、遠慮なく答えてください！

javascriptjqueryfirefoxmousewheel
23
L2Eer

タッチパッドを使用してこのバグをFF 16.01 OSXで再現することはできません（Fiddleは正常に動作します）が、 MozMousePixelScroll 。あなたもそれを巻き込もうとするかもしれません。

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

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

20
David Hellsing

読む 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;
        });
});
5
Salix alba

この質問に対するこの答えは、私が見つけたほとんどのブラウザ互換ソリューションを持っています：

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

 $('#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;
    });
1
Mr Sorbose

この回答は、Chrome、Firefox、iExplorerのクロスブラウジングソリューションです

var handlerMousewheel = function(){
                $(".item").on("wheel mousewheel", function(event) {
                        event.preventDefault();
                                var deltaY = event.originalEvent.deltaY;
                                var wheelDeltaY = event.originalEvent.wheelDeltaY;

                                 if( deltaY == 100 && wheelDeltaY == -120 || deltaY > 0 && wheelDeltaY == undefined ) {
                                        $(".wrapper").animate({"margin-left":"0%"},{duration:100});
                                 }else if(deltaY == -100 && wheelDeltaY == 120 || deltaY < 0 && wheelDeltaY == undefined){
                              $(".wrapper").animate({"margin-left":"50%"},{duration:100});
                                 }
        
                });
        }
  handlerMousewheel();
.container{
  display:block;
  width:100%;
  height:200px;
  overflow-x:hidden;
  overflow-y:scroll;
  background-color: grey;  
}
.wrapper{
  display:block;
  overflow:hidden;
  background-color:#a3cfef;
  padding: 2%;
  width:50%;
  margin:0 auto;
}
.item{
  width:100%;
  height:50px;
  margin:2px 0;
  display:block;
  overflow:hidden;
  border:3px solid #ad08a6;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <div class="wrapper">
    <div class="item"></div>    
    <div class="item"></div>    
    <div class="item"></div>    
    <div class="item"></div>    
    <div class="item"></div>    
    <div class="item"></div>    
    <div class="item"></div>    
  </div>
</div>

https://jsfiddle.net/rrubio/ncLjgwy0/

0
Rene Rubio