23

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

代替

    $('.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 中的一个错误吗（如果是这样，是否有一个跨浏览器黑客可以解决问题）？或者，如果您知道任何其他解决方案可以在没有页面窗口滚动的情况下实现捕获鼠标滚轮事件的相同效果，请随时回答！

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 回答
0

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

于 2018-02-08T08:18:21.890 回答