`window.ScrollTo (...)` в событии `mousemove` вызывает ужасную прокрутку - PullRequest
Новая
       16

`window.ScrollTo (...)` в событии `mousemove` вызывает ужасную прокрутку

0 голосов
/ 03 апреля 2019

У меня есть собственное решение для полосы прокрутки ( просмотр на CodePen ).

Очевидной идеей является перетаскивание пользовательской полосы прокрутки для прокрутки страницы.

Попробуйте и посмотрите, что получится ... это странно дергается, а полоса прокрутки и прокрутка страницы внезапно щелкают между точками.

Процесс прокрутки в данный момент выполняется обработчиком mousemove:

  • обновить положение полосы прокрутки визуально
  • window.scrollTo(...) новая позиция, рассчитанная как область просмотра top относительно новой позиции полосы прокрутки

Если я закомментирую строку window.scrollTo(...), тогда сама полоса прокрутки будет двигаться совершенно плавно и придерживаться курсора.

Соответствующий код 

    mousemove(e) {
        if (!this.active) return;
        this.update(this.getScrollDeltaPositional(e.pageY));
        window.scrollTo({top: this.getWindowScrollTop()});
    }

    update(position, show=true, timer=true, time=0) {
        let track = this.getTrackHeight();
        this.trackPosition = Math.min(Math.max(position, 0), track);
        this.track.style.transform = `translateY(${this.trackPosition}px)`;
    }

    getWindowScrollTop() {
        let scroll = this.getDocumentScroll();
        let position = (this.trackPosition / this.root.clientHeight);
        return Math.round(scroll * position);
    }

(Рекомендуется просмотреть полный исходный код на CodePen)

Я предполагаю, что прокрутка каждого mousemove блокирует события mousemove, в результате чего наблюдаются внезапные щелчки.

Как добиться эффекта плавной прокрутки на window с помощью пользовательской полосы прокрутки?

1 Ответ

1 голос
/ 04 апреля 2019

Я наконец-то нашел ответ

После долгих часов попыток сделать все возможное, чтобы решить эту проблему, я наткнулся на эту идентичную проблему: https://css -tricks.com / forums / topic / scrolltop-inexplicbly-собирающийся-haywire / .

Как этот пользователь в конечном счете обнаружил, MouseEvent.pageY (это то, что я использовал, чтобы получить позицию прокрутки) составляет

относительно верхнего края окна просмотра, включая смещения прокрутки .

Следовательно, движение прокрутки эффективно усиливает события mousemove, вызывая ускорение прокруткиэкспоненциально, как видно из демо.

Так что после полдня хакерства с этим, исправление представляет собой простое Ctrl + H ... используйте MouseEvent.clientY вместо.

...