firefox + jquery mouseWheel przewijania bug wydarzenie

Question

UPDATE poprawkę Pracując jako sugerowane przez Dawida (patrz poniżej):

zastąpić

$('.scrollMe').bind("mousewheel DOMMouseScroll", ...) 

z

$('.scrollMe').bind("mousewheel DOMMouseScroll MozMousePixelScroll", ...) 

oryginalny post

Firefox 16.0.2 (najnowszy) pokazuje problem podczas wiązania zdarzenia "mousewheel/DOMMouseScroll". Przewijanie za pomocą kółka myszy, gdy wskaźnik myszy znajduje się na górze wybranego elementu div, powoduje również przewijanie okna, podczas gdy ja oczywiście tego nie chcę.

Próbowałem dodać kilka metod, aby zatrzymać propagację itp., Ale nic nie działa.

kod 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; 
      }); 
    }); 

Aby zobaczyć go w akcji, prosimy skorzystać z linku jsFiddle poniżej. Na przykładowej stronie po prostu umieść wskaźnik myszy w dziale za pomocą czerwonych pól i użyj kółka myszy. Firefox przewija okno nadrzędne po raz pierwszy (nieoczekiwanie), podczas gdy inne przeglądarki tego nie robią.

jsFiddle Code example

Osobliwe jest to, że Firefox nie powtórzyć zachowanie po ogień zdarzenia na elemencie związanym, co oznacza, że ​​przestanie się przesuwać stronę. Powtarza to jednak po ręcznym przewinięciu strony i ponowieniu.

Testowałem to również w IE9 i Chrome, ale nie mogłem wykryć tego problemu w tych przeglądarkach (co oznacza, że ​​nie przewijają one okna niespodziewanie), więc domyślam się, że jest to specyficzne dla przeglądarki Firefox (wyłącza również każdą wtyczkę w firefoxie itp.)

Czy to naprawdę błąd w Firefoksie (a jeśli tak, to czy istnieje hack, który może zrobić lewę)? Lub, jeśli znasz jakieś inne rozwiązanie, aby uzyskać taki sam efekt, jak łapanie zdarzenia kółka myszy bez przewijania okna strony, odpowiedz na to!

Answer 1

Nie mogę odtworzyć tego błędu w moim FF 16.01 OSX za pomocą tabliczki dotykowej (Fiddle działa dobrze), ale wiem, że istnieje inne specyficzne dla Mozilli zdarzenie o nazwie MozMousePixelScroll. Możesz spróbować również zaangażować się w to.

Jest też więcej informacji Dostępność w MDN: https://developer.mozilla.org/en-US/docs/DOM/DOM_event_reference/DOMMouseScroll

Jak sidenote, myślę zatrzymując domyślną akcję przy użyciu e.preventDefault() powinno wystarczyć, nie ma potrzeby, aby zatrzymać propagacji jak również (o ile nie istnieją inne specyficzne błędy IE).

Answer 2

Czytanie https://developer.mozilla.org/en-US/docs/DOM/DOM_event_reference/DOMMouseScroll wydaje się, że MozMousePixelScroll DOMMouseScroll był dla firefox 16 lub wcześniejszego. W przypadku firefox> 17 użyj zdarzenia 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

To odpowiedź na to pytanie ma rozwiązanie zgodne większość przeglądarek znalazłem:

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

Ta odpowiedź jest rozwiązaniem crossbrowsing na Chrome, Firefox i IExplorer

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/