firefox + jquery mousewheel cuộn sự kiện lỗi

Question

CẬP NHẬT sửa chữa Làm việc theo đề nghị của David (xem dưới đây):

thay

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

với

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

ORIGINAL POST

Firefox 16.0.2 (mới nhất) hiển thị sự cố khi liên kết sự kiện "mousewheel/DOMMouseScroll". Cuộn với con lăn chuột trong khi con trỏ chuột ở trên cùng của div được nhắm mục tiêu của tôi cũng làm cho cửa sổ cuộn xuống — trong khi tôi rõ ràng không muốn điều này.

Tôi đã thử thêm một số phương pháp để ngừng truyền ... nhưng không có gì có vẻ hoạt động.

mã 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; 
      }); 
    }); 

Để nhìn thấy nó trong hành động, hãy làm theo các liên kết dưới đây jsFiddle. Trên trang ví dụ, chỉ cần đặt con trỏ chuột vào trong div với các hộp màu đỏ và sử dụng con lăn của bạn. Firefox sẽ cuộn cửa sổ chính lần đầu tiên (bất ngờ), trong khi các trình duyệt khác thì không.

jsFiddle Code example

Peculiar là Firefox không lặp lại hành vi đó một khi bạn cháy, sự kiện về các yếu tố ràng buộc, có nghĩa là nó ngừng di chuyển trang. Tuy nhiên, nó lặp lại hành vi này sau khi bạn cuộn trang theo cách thủ công sau đó và thử lại. Tôi cũng đã thử nghiệm điều này trong IE9 và Chrome nhưng không thể phát hiện vấn đề này trong các trình duyệt đó (có nghĩa là chúng không cuộn cửa sổ một cách bất ngờ), vì vậy tôi đoán đó là Firefox cụ thể (cũng bị vô hiệu hóa mọi plugin trong firefox, vv)

Đây thực sự là một lỗi trong firefox (và nếu như vậy có một hack trình duyệt chéo có thể làm thủ thuật)? Hoặc, nếu bạn biết về bất kỳ giải pháp nào khác để đạt được hiệu quả tương tự khi bắt sự kiện con lăn chuột mà không cần cuộn cửa sổ của trang, vui lòng trả lời!

Answer 1

Tôi không thể tạo lại lỗi này trong FF 16.01 OSX bằng bàn phím cảm ứng (Fiddle hoạt động tốt), nhưng tôi biết rằng có sự kiện mozilla cụ thể khác gọi là MozMousePixelScroll. Bạn có thể muốn thử liên quan đến điều đó.

Ngoài ra còn có nhiều thông tin có sẵn tại MDN: https://developer.mozilla.org/en-US/docs/DOM/DOM_event_reference/DOMMouseScroll

Là một sidenote, tôi nghĩ dừng lại hành động mặc định sử dụng e.preventDefault() nên là đủ, không cần phải ngăn chặn propagations cũng như (trừ khi có những lỗi cụ thể khác IE).

Answer 2

Đọc https://developer.mozilla.org/en-US/docs/DOM/DOM_event_reference/DOMMouseScroll có vẻ như MozMousePixelScroll DOMMouseScroll là dành cho firefox 16 hoặc cũ hơn. Đối với firefox> 17, hãy sử dụng sự kiện 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

Câu trả lời này về câu hỏi này, đã được nhiều nhất các trình duyệt giải pháp tương thích Tôi đã tìm thấy:

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

Câu trả lời này là một giải pháp crossbrowsing trên Chrome, Firefox và 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/