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

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

最明显的想法是拖动自定义滚动条来滚动页面

试试看会发生什么。。。这是一个奇怪的janky，滚动条和页面滚动会突然在点之间断裂

滚动过程当前位于

mousemove

处理程序中：

• 直观地更新滚动条位置

• window.滚动到（…）

  新位置，计算为相对于新滚动条位置的视口

  top

如果我在

窗口.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

事件，导致观察到突然的快照

如何使用自定义滚动条在

窗口上实现平滑滚动效果？
我终于找到了答案
为了解决这个问题，我花了太多的时间尝试了所有可以想到的方法，但最终还是遇到了同样的问题：

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


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

因此，经过半天的黑客攻击，修复是一个简单的Ctrl+H。。。请改用
MouseEvent.clientY。
FYI如果您想查看一些示例代码或使用一些可以直接定制的东西，可以在此处获取jQueryUI的源代码及其滚动条：