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, между значениями нет.

Если затем перейти и console.log(document.documentElement.scrollTop) каждые 10 мс, тогда мы увидим, что IE просто не обновляет scrollTop по мере прокрутки.

Это очень неприятно, если мы хотим "прикрепить" что-то к позиции прокрутки. Он становится отрывистым от IE.

Я не наблюдал этого поведения в любом другом браузере и не тестировал предыдущие версии IE.

Если кто-то нашел способ исправить поведение IE (может быть, есть волшебный CSS, чтобы отключить плавную прокрутку в IE 11?), то я бы очень хотел услышать об этом!

Спасибо: -)

Ответы

Ответ 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);
    });
}

Ответ 2

Проблема, которую вы описываете, ограничена экземплярами Internet Explorer 11, запущенными в Windows 7. Эта проблема не влияет на платформу, на которой родился IE 11, Windows 8.1. Кажется, что IE 11 на Windows 7 попадает в аналогичную категорию, как и другие реализации прокрутки, упомянутые выше. Это не идеально, но это то, с чем нам приходится работать/пока на время.

Я буду продолжать изучать это; на самом деле, просто выкопал машину Windows 7 из шкафа, чтобы настроить первую вещь утром, чтобы исследовать дальше. Хотя мы не можем решить эту проблему, возможно, возможно, есть способ, которым мы можем обойти эту проблему.

Продолжение следует.

Ответ 3

Как сумасшедшее последнее средство (кажется, что это не так безумно на самом деле, если проблема критическая) - возможно, полностью отключите собственную прокрутку и используйте пользовательскую прокрутку (т.е. http://jscrollpane.kelvinluck.com/)? И привяжите материал onscroll к своим пользовательским событиям: http://jscrollpane.kelvinluck.com/events.html

Ответ 4

Похоже, есть сообщение в IE и принудительное экранирование "краска", чтобы помочь с перетаскиванием. Кажется противоположным большинству усилий по повышению эффективности, но может работать? fooobar.com/info/221698/... (код 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, чтобы браузер обрабатывал анимацию/переход. Например, применяя класс show/hide для прокрутки и анимацию 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 могут предлагать подсказки. В качестве плюса я видел несколько сайтов с навигационными барами, которые "снова появляются" после завершения прокрутки.