Question

我遇到一个问题，在html和body元素上设置overflow-x：hidden会阻止jquery滚动事件被触发。

CSS：

html, body {
  overflow-x: hidden;
}

JS：

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

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

亲自试试：注释掉overflow-x：hidden并弹出你的控制台。当您在html框中向上和向下滚动时，您应该看到“滚动”已记录。重新评论它，滚动事件是静默的。

有谁知道为什么会这样？我知道当你将overflow设置为hidden时它会禁用滚动，但它只应该为你设置的轴（仅在这种情况下为x）执行此操作。提前感谢您的帮助。

Answer 1

有同样的问题。解决方法是从html元素中删除overflow-x：hidden，并将其仅保留在body元素上，它应该可以工作。

Answer 2

我也发现了这种情况。当我们添加：

body {
  overflow-x: hidden;
}

所有window.addEventListener('scroll')个事件都停止了触发。我相信这是因为滚动事件没有移动到document.body。当我将eventListener更改为document.body.addEventListener('scroll')时，事情又开始了。有趣的是我的event.bubbles布尔值是假的。从我读到的内容，滚动事件应该冒泡到窗口。

<强>解决方案

更改

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

到

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

Answer 3

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

Answer 4

在css中设置body {height: 100%;}。它会工作的。您可能希望在div上应用overflow属性而不是整个body，然后相应地更改JS代码。在body上设置overflow属性会消除其滚动功能。另一个解决方案可以是使用Jquery wheel事件，如后面所述 - （https://stackoverflow.com/a/8378946/5348972）。

Answer 5

只需将min-height: 100%添加到body标签。一切都会回到正轨。

overflow-x：hidden正在破坏jquery滚动事件

5 个答案: