在 Chrome 上使用 window.scroll 的错误

Question

我在使用 Google Chrome 和 Edge 浏览器时遇到问题

window.scroll({
    top: 0,
    behavior: 'smooth'
});

问题是它并不总是滚动到页面顶部；大多数时候，它会滚动一部分并停止。此问题出现在 Google Chrome 和 Edge 上，我使用的是最新版本的 Chrome（版本 21.0.6167.140（官方版本）（64 位））。在 Firefox 中，不会出现该问题。

为了解决这个问题，我想出了以下解决方案：

function backToTheTop() {
    let scrollListener = window.scrollY;
    window.scrollTo({
        top: 0,
        behavior: 'smooth'
    });

    setTimeout(function () {
        if (window.scrollY !== 0) {
            backToTheTop();
        }
    }, 200);
}

虽然这解决了最初提到的问题，但它引入了其他问题，例如移动浏览器上滚动缓慢或即使用户在向上滚动时向下滚动，网站也会继续滚动。

有谁遇到过类似的问题并且知道如何解决吗？

Answer 1

当您将代码更改为：

function backToTheTop() {
    let scrollListener = window.scrollY;
    window.scrollTo({
        top: 0,
        behavior: 'smooth'
    });

    setTimeout(function () {
        if (window.scrollY !== 0) {
            console.log('timeout: '+window.scrollY+' ');
            backToTheTop();
        }
    }, 200);
}

然后你会在 de console.log 中看到类似以下内容：

timeout: 13564 
timeout: 2788 
timeout: 573 
timeout: 118 

我可以得出结论，你的函数

backToTheTop()

已启动多次吗？

省略

setTimeout

，并进一步调查为什么您的原始脚本“并不总是转到页面顶部”。