Why doesn't window.addEventListener('scroll', this.someScrollHandler, false) work on IE 10?

问题

I'm currently building a React app with a scroll handler for loading more data in an infinite scroll component. I'm using window.addEventListener('scroll', this.someScrollHandler, false); (with throttling), which works on every browser except for IE — no event is handled.

In fact, testing in the IE console, the below code, then scrolling, results in no logging:

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

What's going on with scroll events and IE?

回答1:

My problem was that I had the body height 100%, that disabled the scroll event.

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

回答2:

After a lot of debugging, the problem was in the css. The app is responsive, so we had a base overflow-x: hidden style, then switching to overflow-x: initial after a breakpoint. Apparently IE doesn't like initial, so it was still picking up on the overflow hidden, thus preventing scroll events from firing. Switching to overflow-x: visible fixed the problem.

回答3:

This is a cross-browser scroll event listener (it disables scrolling, but it should work if you replace preventDefault by your handler):

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;
}

You can see there are a lot of different handlers...

来源：https://stackoverflow.com/questions/31439443/why-doesnt-window-addeventlistenerscroll-this-somescrollhandler-false-wor