火狐+ jQuery的鼠標滾輪滾動事件錯誤

Question

UPDATE工作修復大衛的建議（見下文）：

更換

$('.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中的錯誤（如果是的話是否有跨瀏覽器的黑客可能會做的伎倆）？或者，如果您知道任何其他解決方案都可以在沒有頁面滾動窗口的情況下實現捕捉鼠標滾輪事件的同樣效果，請隨時回答！

Answer 1

我不能在我的FF 16.01 OSX中使用觸摸板（小提琴可以正常工作）重現此錯誤，但我知道還有另一個mozilla特定的事件MozMousePixelScroll。您可能也想嘗試涉及這一點。

有一個在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

這個答案在這個問題上，有多數瀏覽器兼容的解決方案，我發現：

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

一個crossbrowsing解決方案

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

 
\t \t \t \t if(deltaY == 100 && wheelDeltaY == -120 || deltaY > 0 && wheelDeltaY == undefined) { 
 
\t \t \t  \t \t $(".wrapper").animate({"margin-left":"0%"},{duration:100}); 
 
\t \t \t \t }else if(deltaY == -100 && wheelDeltaY == 120 || deltaY < 0 && wheelDeltaY == undefined){ 
 
\t \t \t  $(".wrapper").animate({"margin-left":"50%"},{duration:100}); 
 
\t \t \t \t } 
 
\t 
 
\t \t }); 
 
\t } 
 
    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/