18

我遇到了一个问题，即在 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 框时，您应该会看到记录了“滚动”。重新评论它，滚动事件是静默的。

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

4

5 回答 5

26

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

于 2015-12-09T23:02:12.910 回答
7

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

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'))
于 2017-10-18T18:49:19.167 回答
2 
$(function() {
    $(window).bind('mousewheel', function(event, delta) {
        console.log("mousewheel");
        return false;
    });
});
于 2013-10-26T14:30:29.567 回答
0

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

于 2020-03-02T11:44:42.177 回答
0

body {height: 100%;}在 css 中设置。那时它会起作用的。您可能希望在 div 上应用溢出属性而不是对整个主体应用，然后相应地更改 JS 代码。在 body 上设置溢出属性会带走它的滚动能力。另一种解决方案可以使用本文所述的 Jquery 轮事件（https://stackoverflow.com/a/8378946/5348972）。

于 2016-11-28T03:28:35.897 回答