Question

我目前正在构建一个带有滚动处理程序的React应用程序，用于在无限滚动组件中加载更多数据。我正在使用window.addEventListener('scroll', this.someScrollHandler, false);（带限制），它适用于除IE以外的所有浏览器 - 不处理任何事件。

事实上，在IE控制台中测试，下面的代码，然后滚动，导致没有记录：

window.addEventListener('scroll', function() { console.log('testing') }, false);

滚动事件和IE发生了什么？

Answer 1

我的问题是我身高100％，禁用了滚动事件。

body {
   height: 100%; // <-- will disable window.addEventListener('scroll')
}

Answer 2

这是一个跨浏览器的滚动事件监听器（它禁用滚动，但如果你用你的处理程序替换preventDefault它应该有效）：

function disableScroll() {
  if (window.addEventListener) // older FF
    window.addEventListener('DOMMouseScroll', preventDefault, false);
  window.onwheel = preventDefault; // modern standard
  window.onmousewheel = document.onmousewheel = preventDefault; // older browsers, IE
  window.ontouchmove  = preventDefault; // mobile
  document.onkeydown  = preventDefaultForScrollKeys;
}

你可以看到有很多不同的处理程序......

Answer 3

经过大量调试后，问题出现在css中。应用程序是响应式的，因此我们有一个基本overflow-x: hidden样式，然后在断点后切换到overflow-x: initial。显然IE不喜欢初始，所以它仍然隐藏在溢出上，从而防止滚动事件被触发。切换到overflow-x: visible解决了问题。

为什么window.addEventListener（'scroll'，this.someScrollHandler，false）不能在IE 10上运行？

3 个答案: