firefox + jquery mousewheel滚动事件错误

Question

更新大卫建议的工作修复（见下文）：

更换

    $('.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的（也禁用了firefox中的每个插件等） ）

这真的是firefox中的一个错误（如果有的话，是否会出现跨浏览器的黑客攻击）？ 或者，如果您知道任何其他解决方案以实现捕获鼠标滚轮事件的相同效果而不使页面的窗口滚动，请随时回答！

Answer 1

我无法使用触摸板在我的FF 16.01 OSX中重现这个错误（小提琴工作正常），但我知道还有另一个名为MozMousePixelScroll的特定于Mozilla的事件。 您可能也想尝试将其包含在内。

MDN还提供了更多信息： https ： //developer.mozilla.org/en-US/docs/DOM/DOM_event_reference/DOMMouseScroll

作为旁注，我认为使用e.preventDefault()停止默认操作应该足够了，也不需要停止传播（除非有其他IE特定的错误）。

Answer 2

阅读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;
        });
});

Answer 3

关于这个问题的答案，我找到了与浏览器最兼容的解决方案：

如何检测滚动方向

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

Answer 4

这个答案是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/