overflow-x：hidden正在破坏jquery滚动事件 [英] overflow-x: hidden is breaking jquery scroll event

问题描述

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

CSS：

  html，body {
 overflow-x：hidden; 
 
  

JS：

<$ （$）$（）函数（）{
$（window）.on（scroll，function（e）{
console.log（scrolling）;
}）;
}）;

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

自己尝试：
注释掉overflow-x：hidden并弹出打开您的控制台。当您在html框中上下滚动时，您应该看到滚动记录。重新评论它，滚动事件是沉默的。

有谁知道为什么会发生这种情况？我知道，当你设置隐藏溢出禁止滚动，但它应该只对你设置的轴（在这种情况下只有x）。在此先感谢您的帮助。 解决方案

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

I am having an issue where setting overflow-x: hidden on the html and body elements is preventing the jquery scroll event from firing.

CSS:

html, body {
  overflow-x: hidden;
}

JS:

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

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

Try it for yourself: Comment out overflow-x: hidden and pop open your console. You should see "scrolling" logged as you scroll up and down the html box. Comment it back in and the scroll event is silent.

Does anyone know why this is happening? I'm aware that when you set overflow to hidden it disables scrolling, but it should only do it for the axis that you are setting (x only in this case). Thanks in advance for any help.

解决方案

Had the same problem. Solution is to remove the overflow-x: hidden from the html element and leave it only on the body element and it should work.

这篇关于overflow-x：hidden正在破坏jquery滚动事件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！