IE 11平滑滚动不会触发中间滚动事件

如果我们做一个简单的测试用例如：

document.documentElement.addEventListener('scroll', function() { console.log(document.documentElement.scrollTop); }); 

然后通过单击轨道或使用PageDown / PageUp使用滚动条滚动，然后我们可以看到在滚动动画结束时我们只获得一个事件。

现在理论上我可以通过模拟滚动事件来修复一些行为。 使用jQuery和Underscore的示例代码：

 $(function () { var $document = $(document), until = 0; var throttleScroll = _.throttle(function () { $document.scroll(); if (+new Date < until) { setTimeout(throttleScroll, 50); } }, 50); $document.keydown(function (evt) { if (evt.which === 33 || evt.which === 34) { until = +new Date + 300; throttleScroll(); } }); }); 

但它仍然无效。 我们只使用原始scrollTop和目标scrollTop获取滚动事件，两者之间没有值。

如果然后每隔10ms去和console.log(document.documentElement.scrollTop) ，那么我们可以看到IE只是在滚动时不更新scrollTop 。

如果我们想要将某些内容“固定”到滚动位置，这将非常令人沮丧。 IE会变得生涩。

我没有在任何其他浏览器上观察到此行为，并且没有使用以前的IE版本进行测试。

如果有人找到一种方法来修复IE的行为（也许有一个神奇的CSS来关闭IE 11中的平滑滚动？）那么我非常想听听它！

谢谢 ：-）

Answer 1

你说： “如果有人找到一种方法来修复IE的行为（也许有一个神奇的CSS来关闭IE 11中的平滑滚动？）那么我非常想听听它！”

这不会关闭它，但这是我用来解决平滑滚动问题，即使用固定元素。

 if(navigator.userAgent.match(/Trident\/7\./)) { $('body').on("mousewheel", function ( event ) { event.preventDefault(); var wd = event.wheelDelta; var csp = window.pageYOffset; window.scrollTo(0, csp - wd); }); } 

Answer 2

您所描述的问题仅限于在Windows 7上运行的Internet Explorer 11的实例。此问题不会影响IE 11诞生的平台，Windows 8.1。 似乎Windows 7上的IE 11与上面提到的其他滚动实现属于类似的类别。 它并不理想，但它是我们暂时需要与之合作的东西。

我要继续研究这个; 事实上，只是将一台Windows 7机器从机柜中取出来安装第一件事，以便进一步调查。 虽然我们无法正面解决这个问题，但也许，我们有办法绕过这个问题本身。

未完待续。

Answer 3

作为一个疯狂的最后手段（如果问题很关键似乎并不那么疯狂） – 可能完全关闭原生滚动并使用自定义滚动（即http://jscrollpane.kelvinluck.com/ ）？ 并将onscroll内容绑定到其自定义事件： http ： //jscrollpane.kelvinluck.com/events.html

Answer 4

看起来IE上有一个post，并强制屏幕“绘画”以帮助拖放。 似乎与大多数性能工作相反，但可能有效吗？ https://stackoverflow.com/a/12395506/906526 （代码来自https://stackoverflow.com/users/315083/george ）

 function cleanDisplay() { var c = document.createElement('div'); c.innerHTML = 'x'; c.style.visibility = 'hidden'; c.style.height = '1px'; document.body.insertBefore(c, document.body.firstChild); window.setTimeout(function() {document.body.removeChild(c)}, 1); } 

您可以尝试CSS动画，以便浏览器处理动画/过渡。 例如，在滚动和CSS动画上应用show / hide类。

 .hide-remove { -webkit-animation: bounceIn 2.5s; animation: bounceIn 2.5s; } .hide-add { -webkit-animation: flipOutX 2.5s; animation: flipOutX 2.5s; display: block !important; } 

如果没有浏览器处理动画（使用广告素材css），关键帧和JS性能可能会提供潜在客户。 作为一个加号，我看到几个带有导航栏的网站在滚动结束后“重新出现”。