javascript - `window.ScrollTo(...)` 事件中的 `mousemove` 会产生可怕的卡顿滚动

Question

我有一个自定义滚动条解决方案 ( view on CodePen )。

显而易见的想法是拖动自定义滚动条应该滚动页面。

试一试，看看会发生什么......奇怪的是卡顿，滚动条和页面滚动会突然在点之间卡住。

滚动过程当前在 mousemove 处理程序中:

• 直观地更新滚动条位置
• window.scrollTo(...) 新位置，计算为相对于新滚动条位置的视口(viewport) 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上实现流畅的滚动效果？

Answer 1

我终于找到了答案

在尝试了所有可能的补救措施后，我偶然发现了这个相同的问题:https://css-tricks.com/forums/topic/scrolltop-inexplicably-going-haywire/ .

正如该用户最终发现的那样，MouseEvent.pageY(这是我用来获取滚动位置的)是

relative to the top edge of the viewport, including scroll offsets.

因此，滚动移动有效地放大了 mousemove 事件，导致滚动以指数方式加速，如演示中所示。

因此，经过半天的研究，解决方法是简单的 Ctrl+H...改为使用 MouseEvent.clientY。