IE 11平滑滚动不会触发中间滚动事件 [英] IE 11 smooth scrolling not firing intermediate scroll events

问题描述

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

If we make a simple test case like:

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

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

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.

现在从理论上讲，我可以通过模拟滚动事件来修复某些行为.带有jQuery和Underscore的示例代码:

Now theoretically I could fix some of that behaviour by simulating the scroll events. Example code with jQuery and 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之间获得滚动事件，两者之间没有任何值.

But it still does not work. We only get scroll events with the original scrollTop and the destination scrollTop, no values in between.

如果然后每隔10毫秒执行一次console.log(document.documentElement.scrollTop)，那么我们可以看到IE在滚动时不会更新scrollTop.

If then go and console.log(document.documentElement.scrollTop) every 10ms, then we can see that IE just does not update the scrollTop as it scrolls.

如果我们想将某些东西固定"到滚动位置，这将非常令人沮丧. IE浏览器变得生涩了.

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行为的方法(也许有一种神奇的CSS可以关闭IE 11中的平滑滚动功能?)，那么我非常想听听它！

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!

谢谢:-)

推荐答案

您说: CSS来关闭IE 11中的平滑滚动?)然后，我非常想听听它！"

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!"

这不会关闭它，但是这就是我用来解决固定元素"中的平滑滚动问题的方法.

This does not turn it off, but here is what I use to resolve the smooth scroll issue in ie with Fixed elements.

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

这篇关于IE 11平滑滚动不会触发中间滚动事件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！