Tuỳ chỉnh plugin bánh xe chuột jQuery

Question

Tôi có thanh trượt toàn màn hình và muốn bật điều hướng bằng cách sử dụng bánh xe chuột. Để phát hiện sự kiện bánh xe chuột, tôi nghĩ plugin jQuery mousewheel phải là lựa chọn tốt nhất.

Tôi có thể bao gồm chức năng này và chức năng kích hoạt. Nhưng tôi không thể (và không tìm thấy bất kỳ tài nguyên nào) để cấu hình theo cách tôi muốn.

Tôi muốn kiểm tra số lượng pixel đã di chuyển nhất định. Vì vậy, ví dụ, nếu bánh xe chuột cố gắng di chuyển 20px up, tôi muốn kích hoạt một hàm, hoặc 20px down cho một chức năng khác.

​$(document).ready(function(){ 
    $('body').bind('mousewheel', function(e){ 
     if(e.originalEvent.wheelDelta /120 > 0) { 
      alert('Wait! I fire way too often!'); 
     } 
     else{ 
      alert('We are going down, way too msuch alerts!'); 
     } 
    }); 
}); 

JS FIDDLE (Cuộn Lên/Xuống)

Answer 1

Nếu tôi hiểu vấn đề của bạn một cách chính xác, bạn đang chứng kiến ​​những biến cố hỏa hoạn quá thường xuyên. Vấn đề ở đây là đối với bất kỳ hành động cuộn nhất định nào, sự kiện sẽ xảy ra nhiều lần. Bạn có thể thấy điều này nếu bạn mở bảng điều khiển dành cho nhà phát triển trong trình duyệt của mình và thực hiện console.log(e.originalEvent.wheelDelta). Điều này có thể phá vỡ một cuộn lớn vào một số sự kiện cuộn nhỏ, ném ra hành vi mong muốn của bạn. Con đường tôi xử lý này là sử dụng một biến để giữ đồng bằng cuộn:

$(document).ready(function(){ 
    var scrollPixels = 0; // variable to store scroll delta 

    $('body').bind('mousewheel', function(e){ 
     // increment/decrement scroll delta 
     scrollPixels += e.originalEvent.wheelDelta; 
     console.log(scrollPixels); 

     if (scrollPixels < -20) { 
      scrollPixels = 0; // clear scroll delta 
      alert('Coming down!'); 
     } 
     else if (scrollPixels > 20){ 
      scrollPixels = 0; // clear scroll delta 
      alert('Coming up!'); 
     } 
    }); 
}); 

Sau đó bạn có thể xóa vùng đồng bằng cuộn sau khi lên hoặc xuống đám cháy báo động.

JS Fiddle

Bạn cũng có thể muốn tăng thử nghiệm của bạn đến hơn 20 pixel như hầu hết các cuộn sẽ cháy sự kiện này - 20 pixel chỉ khoảng 1/4 của một inch là.

Hy vọng điều đó sẽ hữu ích. Nếu điều đó không khắc phục được sự cố của bạn, vui lòng nhận xét về nơi tôi đã gặp sự cố. Chúc bạn may mắn!

---

Update để bình luận Địa chỉ:

Bạn có thể chờ cho đến khi cuộn dừng bằng cách thiết lập một thời gian chờ mà sẽ chờ đợi một khoảng thời gian ngắn (250 ms trong ví dụ này) sau khi di chuyển đã ngừng thực hiện. Tôi chuyển logic bên trong thời gian chờ này để nó sẽ chỉ chạy sau khi di chuyển đã ngừng:

$(document).ready(function(){ 
    var scrollPixels = 0; // variable to store scroll delta 
    var scrolling; // timeout function var 

    $('body').bind('mousewheel', function(e){ 
     // increment/decrement scroll delta 
     scrollPixels += e.originalEvent.wheelDelta; 
     console.log(scrollPixels); 

     clearTimeout(scrolling); 
     scrolling = setTimeout(function() { 
     console.log('stop wheeling! ', scrollPixels); 
     scrolling = undefined; 

     if (scrollPixels < -300) { 
      scrollPixels = 0; // clear scroll delta 
      alert('Coming down!'); 
     } 
     else if (scrollPixels > 300){ 
      scrollPixels = 0; // clear scroll delta 
      alert('Coming up!'); 
     } 

    }, 250); 
    }); 
}); 

Cập nhật JS Fiddle