溢出-x：隐藏正在破坏 jquery 滚动事件答案

【问题标题】：overflow-x: hidden is breaking jquery scroll event溢出-x：隐藏正在破坏 jquery 滚动事件
【发布时间】：2020-03-21 00:06:03
【问题描述】：

我遇到了一个问题，即在 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）。提前感谢您的帮助。

【问题讨论】：

$('body').on('scroll') 怎么样？
更具体地说，你的窗口没有滚动，你的 html/body 是。如果您删除 height: 100%; 您的窗口滚动将正常工作。
当你设置overflow-x:hidden时，你看到的滚动条是针对body的。缩小高度，你会看到两个滚动条，一个用于正文，一个用于窗口。所以...... Torr3ent 说了什么。 jsfiddle.net/r7Fqq/7
谢谢，解决得很好。感谢您的帮助。
类似问题，请看：stackoverflow.com/a/37185706/2050359

标签： jquery html css scroll overflow

【解决方案1】：

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

【讨论】：

是的。为我工作。不知道为什么这么想。理论上overflow-x应该只会影响水平滚动吧？
否则，只保留html。
在为html 和body 设置溢出滚动样式时，我遇到了检测窗口滚动事件的问题。

【解决方案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'))

【讨论】：

【解决方案3】：

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

【讨论】：

谢谢，正是我需要的！在我的情况下，必须在整个文档上隐藏溢出（x 和 y），但需要捕获滚动/鼠标滚轮事件以显示警报。

【解决方案4】：

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

【讨论】：

【解决方案5】：

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

【讨论】：