Question

更新 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 Code example

奇怪的是，一旦你在绑定元素上触发事件，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＆gt; 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

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

How to detect scroll direction

 $('#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上的交叉浏览解决方案

＆＃13;

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();

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

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

firefox + jquery mousewheel滚动事件错误

4 个答案: