overflow-x: hidden đang phá vỡ sự kiện cuộn jquery

Question

Tôi gặp sự cố khi thiết lập tràn-x: bị ẩn trên phần tử html và nội dung đang ngăn sự kiện cuộn jquery kích hoạt.

CSS:

html, body { 
    overflow-x: hidden; 
} 

JS:

$(function(){ 
    $(window).on("scroll", function(e){ 
    console.log("scrolling");  
    }); 
}); 

http://jsfiddle.net/r7Fqq/6/

Hãy thử nó cho chính mình: Comment ra overflow-x: ẩn và pop mở giao diện điều khiển của bạn. Bạn sẽ thấy "di chuyển" đăng nhập khi bạn di chuyển lên và xuống hộp html. Bình luận nó trở lại và sự kiện cuộn là im lặng.

Có ai biết tại sao điều này xảy ra không? Tôi biết rằng khi bạn thiết lập tràn để ẩn nó vô hiệu hóa di chuyển, nhưng nó chỉ nên làm điều đó cho trục mà bạn đang thiết lập (x chỉ trong trường hợp này). Cảm ơn trước sự giúp đỡ nào.

Answer 1

$(function() { 
    $(window).bind('mousewheel', function(event, delta) { 
     console.log("mousewheel"); 
     return false; 
    }); 
}); 

Answer 2

Có cùng vấn đề. Giải pháp là xóa bỏ tràn-x: ẩn khỏi phần tử html và chỉ để nó trên phần tử cơ thể và nó sẽ hoạt động.

Answer 3

Đặt body {height: 100%;} bằng css. Nó sẽ hoạt động sau đó. Bạn có thể muốn áp dụng thuộc tính tràn trên một div hơn toàn bộ cơ thể và sau đó thay đổi mã JS cho phù hợp. Thiết lập một thuộc tính tràn trên cơ thể lấy đi khả năng cuộn của nó. Một giải pháp khác có thể sử dụng sự kiện bánh xe Jquery như mô tả trong bài này- (https://stackoverflow.com/a/8378946/5348972).

Answer 4

Tôi cũng thấy điều này là đúng. Khi chúng tôi thêm:

body { 
    overflow-x: hidden; 
} 

tất cả window.addEventListener('scroll') sự kiện ngừng kích hoạt. Tôi tin rằng điều này là do sự kiện cuộn không được di chuyển đến document.body. Khi tôi thay đổi eventListener thành document.body.addEventListener('scroll'), mọi thứ sẽ bắt đầu hoạt động trở lại. Điều thú vị là boolean event.bubbles của tôi là sai. Từ những gì tôi đọc sự kiện cuộn nên bong bóng vào cửa sổ.

Giải pháp

thay đổi

window.addEventListener('scroll',() => console.log('MEOW')) 

để

document.body.addEventListener('scroll',() => console.log('MEOW'))