为什么 window.addEventListener('scroll', this.someScrollHandler, false) 在 IE 10 上不起作用？答案

【问题标题】：Why doesn't window.addEventListener('scroll', this.someScrollHandler, false) work on IE 10?为什么 window.addEventListener('scroll', this.someScrollHandler, false) 在 IE 10 上不起作用？
【发布时间】：2015-07-15 19:32:09
【问题描述】：

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

其实在 IE 控制台中测试，下面的代码，然后滚动，结果是没有记录：

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

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

【问题讨论】：

你的代码在 IE11 中适用于我

标签： javascript reactjs internet-explorer dom-events

【解决方案1】：

我的问题是我的身体高度为 100%，这禁用了滚动事件。

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

【讨论】：

感谢您提供此信息，我的问题是一样的！
如果任何人的身体高度为 100%，请尝试定位除 window 之外的任何其他元素，例如_element_whose_height_isnt_100.addEventListener('scroll', function() { console.log('testing') }, false);这就是我解决这个问题的方法。

【解决方案2】：

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

【讨论】：

哥们，你救了我的一天！

【解决方案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;
}

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

【讨论】：