Chụp sự kiện bánh xe cuộn

Question

Tôi muốn chụp một sự kiện khi người dùng cuộn bánh xe cuộn của họ trong tình huống mà trang không cuộn/không cuộn được. Tuy nhiên, sự kiện cuộn JS tiêu chuẩn chỉ kích hoạt khi trình duyệt thực sự di chuyển và sẽ không kích hoạt phần tử DOM theo kiểu để ẩn tràn.

Cuộn bản đồ của Google để thu phóng là ví dụ về loại hành vi mà tôi đang tìm kiếm.

Có ai có ý tưởng nào về cách thực hiện điều gì đó như thế này không?

Cảm ơn.

Answer 1

Bạn có thể nắm bắt được chuột sự kiện -wheel tốt:

$('#yourElement').on('DOMMouseScroll mousewheel', function() { 
    ... 
}); 

Live Demo:http://jsfiddle.net/chtNP/1/

(. tôi đang sử dụng jQuery để ràng buộc xử lý sự kiện, nhưng nó hoạt động bất kể là API bạn sử dụng, tất nhiên)

Answer 2

Với jQuery, bạn có thể sử dụng this plugin hoặc bất kỳ số nào tương tự cũng giống như vậy.

Nếu jQuery hoặc một khuôn khổ tương tự không phải là một lựa chọn, đó là có thể, nhưng chuẩn bị cho mình một thế giới của đau đớn khi bạn muốn làm cho nó làm việc trong nhiều trình duyệt ...

Answer 3

Tại thời điểm này, Firefox xác định các sự kiện DOMMouseScroll và bánh xe. Chrome, Opera và IE (mới nhất, một lần nữa!) xác định con lăn chuột.

Đây là cách tôi đã làm nó:

if(window.onwheel !== undefined) { 
    window.addEventListener('wheel', onMouseWheel) 
} else if(window.onmousewheel !== undefined) { 
    window.addEventListener('mousewheel', onMouseWheel) 
} else { 
    // unsupported browser 
} 

Lưu ý rằng sự ủng hộ addEventListener trong các phiên bản IE cũ cần một polyfill. Ngoài ra, bạn có thể sử dụng window.mousewheel = function() {} hoặc phương thức bất kỳ.

Như bạn có thể thấy, trình xử lý sự kiện được gắn vào đối tượng cửa sổ. Bạn không thể đính kèm nó vào các phần tử theo kiểu trình duyệt chéo. Bạn có thể sử dụng thuộc tính đích đối tượng sự kiện để xem nơi nó được kích hoạt, và làm một bộ lọc trên cơ sở đó.

PS: Xem thêm nhiều trình duyệt: Trong IE, bạn phải sử dụng thuộc tính "wheelDelta" (và đảo ngược dấu!) Bên trong đối tượng sự kiện khi xử lý nó trong hàm gọi lại ("onMouseWheel"). Các trình duyệt khác sẽ điền "deltaY" (hoặc "deltaX" để cuộn ngang).