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

我有一个问题，设置overflow-x：隐藏在html和body元素上是阻止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）。在此先感谢您的帮助。

2897

2017-07-15 22:36

起源

怎么样 $('body').on('scroll')？ - Chad

更具体地说，你的窗口不滚动，你的html /正文。如果删除了 height: 100%; 你的窗口滚动将正常工作。 - Chad

当你设置overflow-x：hidden时，你看到的滚动条是针对正文的。缩小高度，你会看到两个滚动条，一个用于主体，一个用于窗口。那么...... Torr3ent说的是什么。 jsfiddle.net/r7Fqq/7 - Dom Day

谢谢，修好它就好了。感谢帮助。 - jlarusso

看起来类似的问题，请看看： stackoverflow.com/a/37185706/2050359 - rtrukhin

答案:

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

2017-12-09 23:02

是的。为我工作。不知道为什么这么想。理论上， overflow-x 应该只影响水平滚动，不是吗？ - jeteon

否则，只留在 html。 - Alex78191

在设置样式时，我遇到了检测窗口滚动事件的问题 html 和 body 溢出滚动样式。 - Daniel Dewhurst

谢谢，这对我来说非常合适。 - besserwisser

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

2017-10-26 14:30

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

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-18 18:49

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

2017-11-28 03:28

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

答案:

热门问题