firefox + jquery鼠标滚动事件错误

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

更换

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