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

Question

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

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

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

现在理论上我可以通过模拟滚动事件来修复一些这种行为。带有 jQ​​uery 和下划线的示例代码：

$(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 的滚动事件，两者之间没有值。

如果然后每 10 毫秒去一次 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 上有一个帖子并强制屏幕“绘制”以帮助拖放。似乎与大多数性能努力相反，但可能有效？ 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 动画上应用显示/隐藏类。

.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 性能可能会提供线索。另外，我看到几个网站的导航栏在滚动结束后“重新出现”。