javascript IE 11 平滑滚动不触发中间滚动事件
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/21775234/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
IE 11 smooth scrolling not firing intermediate scroll events
提问by daniel.gindi
If we make a simple test case like:
如果我们做一个简单的测试用例，比如：
document.documentElement.addEventListener('scroll', function() {
console.log(document.documentElement.scrollTop);
});
And then go and scroll using the scrollbar by clicking the track, or by using PageDown/PageUp, then we can see that we only get one event at the end of the scrolling animation.
然后通过单击轨道使用滚动条进行滚动，或者使用PageDown/PageUp，然后我们可以看到我们只在滚动动画结束时获得一个事件。
Now theoretically I could fix some of that behaviour by simulating the scroll events. Example code with jQuery and Underscore:
现在理论上我可以通过模拟滚动事件来修复一些这种行为。带有 jQuery 和下划线的示例代码：
$(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();
}
});
});
But it still does not work. We only get scroll events with the original scrollTopand the destination scrollTop, no values in between.
但它仍然不起作用。我们只得到带有 originalscrollTop和 destination 的滚动事件scrollTop，中间没有值。
If then go and console.log(document.documentElement.scrollTop)every 10ms, then we can see that IE just does not update the scrollTopas it scrolls.
如果然后console.log(document.documentElement.scrollTop)每 10 毫秒执行一次，那么我们可以看到 IE 在scrollTop滚动时不会更新。
This is very frustrating if we want to "pin" something to the scroll position. It gets jerky with IE.
如果我们想将某些内容“固定”到滚动位置，这将非常令人沮丧。它变得生涩与 IE。
I did not observe this behaviour on any other browser, and did not test with previous IE versions.
我没有在任何其他浏览器上观察到这种行为，也没有用以前的 IE 版本进行测试。
If anyone has found a way to fix IE's behaviour (maybe there's a magic CSS to turn off smooth scrolling in IE 11?) then I would very much like to hear about it!
如果有人找到了修复 IE 行为的方法（也许有一个神奇的 CSS 可以关闭 IE 11 中的平滑滚动？）那么我非常想听听它！
Thanks :-)
谢谢 ：-）
回答by M H
You said:"If anyone has found a way to fix IE's behaviour (maybe there's a magic CSS to turn off smooth scrolling in IE 11?) then I would very much like to hear about it!"
你说：“如果有人找到了修复 IE 行为的方法（也许有一个神奇的 CSS 可以关闭 IE 11 中的平滑滚动？）那么我非常想听听它！”
This does not turn it off, but here is what I use to resolve the smooth scroll issue in ie with Fixed elements.
这不会将其关闭，但这是我用来解决 ie 固定元素中的平滑滚动问题的方法。
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);
});
}
回答by Sampson
The issue you're describing is limited to instances of Internet Explorer 11 running on Windows 7. This problem doesn't affect the platform upon which IE 11 was born, Windows 8.1. It seems as though IE 11 on Windows 7 falls into a similar category as other scrolling implementations mentioned above. It's not ideal, but it's something we have to work with/around for the time being.
您所描述的问题仅限于在 Windows 7 上运行的 Internet Explorer 11 实例。此问题不会影响 IE 11 的诞生平台 Windows 8.1。Windows 7 上的 IE 11 似乎与上面提到的其他滚动实现属于类似的类别。这并不理想，但这是我们暂时必须处理/解决的问题。
I'm going to continue looking into this; in fact, just dug a Windows 7 machine out of the closet to setup first thing in the morning so as to investigate further. While we cannot address this head-on, perhaps, maybe, there's a way we can circumvent the problem itself.
我将继续研究这个问题；其实，早上刚从柜子里掏出一台Windows 7机器来设置，以便进一步调查。虽然我们无法正面解决这个问题，但也许，也许，我们可以通过某种方式来规避问题本身。
To be continued.
待续。
回答by Andrey
As a crazy last resort (seems not so crazy actually if the issue is critical) - maybe turn off native scrolling completely and use custom scrolling (i.e. http://jscrollpane.kelvinluck.com/)? And bind onscroll stuff to its custom events: http://jscrollpane.kelvinluck.com/events.html
作为一个疯狂的最后手段（如果问题很严重，实际上似乎并不那么疯狂） - 也许完全关闭本机滚动并使用自定义滚动（即http://jscrollpane.kelvinluck.com/）？并将 onscroll 内容绑定到其自定义事件：http: //jscrollpane.kelvinluck.com/events.html
回答by s6712
Looks like there's a post on IE and forcing a screen "paint" to help with drag-drop. Seems the opposite of most performance efforts but might work? https://stackoverflow.com/a/12395506/906526(code from https://stackoverflow.com/users/315083/george)
看起来在 IE 上有一个帖子并强制屏幕“绘制”以帮助拖放。似乎与大多数性能努力相反，但可能有效吗？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);
}
You might try CSS animations so the browser handles animation/ transition. Eg applying a show/ hide class on scroll and, CSS animation.
您可以尝试使用 CSS 动画，以便浏览器处理动画/过渡。例如，在滚动和 CSS 动画上应用显示/隐藏类。
.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;
}
If not having a browser handle animation (with creative css), keyframes and JS performance might offer leads. As a plus, I've seen several sites with navigation bars that "reappear" after scroll end.
如果没有浏览器处理动画（带有创意 css），关键帧和 JS 性能可能会提供线索。作为一个加号，我已经看到几个站点的导航栏在滚动结束后“重新出现”。
