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

如果我们制作一个简单的测试用例，如：

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

然后通过单击轨迹或使用PageDown/PageUp使用滚动条滚动，我们可以看到在滚动动画的末尾只会出现一个事件

现在理论上，我可以通过模拟滚动事件来修正一些行为。带有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();
        }
    });
});

$（函数（）{
var$document=$（document），直到=0；
var throttleScroll=u0.throttle（函数（）{
$document.scroll（）；
如果（+新日期<截止日期）{
设置超时（throttleScroll，50）；
}
}, 50);
$document.keydown（函数（evt）{
if（evt.which==33 | | evt.which==34）{
截止日期=+新日期+300；
throttleScroll（）；
}
});
});

但它仍然不起作用。我们只获得原始

scrollTop

和目标

scrollTop

的滚动事件，两者之间没有值

如果然后每隔10毫秒转到

console.log（document.documentElement.scrollTop）

，那么我们可以看到IE只是在滚动时不更新

scrollTop

这是非常令人沮丧的，如果我们想“引脚”的东西滚动位置。它会因为IE而变得神经质

---

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

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

---

谢谢：-）

看起来IE上有一个帖子，强制屏幕“绘制”以帮助拖放。似乎与大多数性能努力相反，但可能有效？（源代码）

您可以尝试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性能可能会提供线索。另外，我还看到过一些网站在滚动结束后“重新出现”了导航栏

您描述的问题仅限于运行在Windows 7上的Internet Explorer 11实例。这个问题不会影响IE 11诞生的平台Windows 8.1。似乎Windows7上的IE11与上面提到的其他滚动实现属于类似的类别。这并不理想，但这是我们目前必须解决的问题

我将继续研究这个问题；事实上，早上第一件事就是从柜子里挖出一台Windows7机器来安装，以便进一步调查。虽然我们无法正面解决这个问题，但也许，也许，有一种方法可以绕过问题本身

继续。

作为一种疯狂的最后手段（如果问题很严重，实际上似乎没有那么疯狂）-可能完全关闭本机滚动并使用自定义滚动（即）？并将onscroll内容绑定到其自定义事件：

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

这并没有关闭它，但下面是我用来解决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);
    });
}

---

没什么啊？我想是的。这很古老，但我遇到了完全相同的问题。我尝试使用setInterval并强制函数以60fps的速度更新，但这使它在所有浏览器上都明显不稳定。另外，它似乎对IE也没有什么影响：\在做了更多的修改之后，我发现消除抖动的最好方法是尽可能多地使用

position:fixed

，而不是手动

position:absolute

。这肯定是IE中的一个渲染错误。禁用平滑滚动功能后，它不会出现太多问题，但仍然有点不稳定。另外，默认情况下会启用平滑滚动，因此几乎所有IE用户都会注意到这个问题。我的问题不是固定元素，而是虚拟表。。。滚动时无法渲染新单元格。像往常一样，糟透了。即使在10个版本之后，“我在任何其他浏览器上都没有观察到这种行为”——iOS Safari自发布之日起就一直如此。我怀疑IE团队认为，如果这能给他们带来性能优势，他们可以遵循这一先例。Android Chrome发送滚动事件的频率相当高，但还不足以消除抖动。这会有什么帮助？重画与滚动无关。如果这样做行得通的话，你是否建议让浏览器每X毫秒重新绘制一次，不管它是否在滚动？我理解这个问题，因为“移动菜单”看起来不稳定，所以建议重新绘制定位信息。当滚轮滚动时，所有浏览器都会有很大的跳跃。不，问题是没有获取JAVASCRIPT ONSCROLL事件。听起来像。。。你是IE团队的？还是我错了？无论如何，任何努力都是值得赞赏的！我确信不仅仅是我。。。因为这对可能的功能是一个很大的限制。（虚拟表格等）@daniel.gindi是的，我是Internet Explorer团队的项目经理。如果你有一个演示，打破了这一结果，我将感谢一个链接。“一些可以实验的东西会使进一步的调查更加富有成效。”乔纳森·桑普森（Jonathan Sampson）据我所知，这个问题是关于IE11在平滑滚动动画中没有触发滚动事件的。所以我们可以看到页面滚动动画，但是在这个动画中我们没有得到滚动事件，所以所有需要在滚动事件上更新的东西实际上都没有更新，它只会在动画结束时，当滚动事件被触发时立即更新。这给了我们当页面已经设置动画时的不稳定行为，并且需要更新的内容在动画完成后就会跳转。@Win 8和IE 10.0.9200.16384上的乔纳森·桑普森我看到这个小提琴在动画期间没有更新div文本。参见：关于Win 8.1和IE 11.0.13 t

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