为什么window.addEventListener('scroll',this.someScrollHandler,false)不能在IE 10上运行？

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

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

Answer 3

这是一个跨浏览器滚动事件侦听器（它禁用滚动，但如果您用处理程序替换 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;
}

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