在`mousemove`事件中的`window.ScrollTo（...）`给出了可怕的janky滚动

Question

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

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

尝试一下，看看会发生什么......这是奇怪的janky，滚动条和页面滚动会突然在点之间捕捉。

滚动过程目前在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

I finally found the answer

经过太多时间尝试一切可以解决这个问题，我偶然发现了这个相同的问题：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代替。