为什么在使用非零 Y 调用 window.scrollTo(...) 后页面滚动到顶部答案

【问题标题】：Why is page scrolled to the top after calling window.scrollTo(...) wiith non zero Y为什么在使用非零 Y 调用 window.scrollTo(...) 后页面滚动到顶部
【发布时间】：2021-02-03 17:35:29
【问题描述】：

我观察到奇怪的行为，我相信我可以排除一些常见的原因。我需要在单页应用程序（Angular）中返回时实现滚动位置恢复。

首先，我需要说的是，出于调试目的，我有类似 style="min-height: 8000px !important;" 之类的东西在 body 上，以确保始终有足够的空间并且视口不会比请求的滚动短。

history.scrollRestoration 设置为“手动”

当用户导航返回时，我只是调用 window.scrollTo(0, Y)。有时它工作得很好，有时它滚动到顶部（浏览器发出的滚动事件也说 scoll 到 0）我不知道为什么它可以，为什么不可以/

代码看起来像

window.addEventListener('scroll', function (e: any): void {
  console.log('window scrolled to ' + window.scrollY);
});

// called with resored Y value
function onNavigateBack(y) {
  console.log("Before " + window.scrollY)
  console.log("Calling scroll to y = " + y)
  window.scrollTo(0, y) 
  console.log("After " + window.scrollY)
}

假设保存的值为 y=470，则输出为

Before ... (there is actual value)
Calling scroll to y = 470
After 470
.... route is initialized there ...
window scrolled to 0

观察

没有其他 window.scrollTo 没有调用 window.scroll（通过模拟验证）
当未调用 scrollTo 时，在错误情况下滚动到顶部不会发生 -> 无效滚动到顶部是请求滚动的结果
没有触发其他 scoll 事件
Chrome 和 Firefox 是一致的，有时会理解工作

问题是。知道什么会导致这种行为吗？或者什么可以拦截滚动？我首先担心的是页面在渲染之间太短了，但即使使用 min-height hack 也会保留。

编辑：再观察一次似乎成功滚动与小 Y 相关（就像 y = 200 永远不会失败）并且在大 Y 上失败（例如 Y > 800px）。但是，滚动波纹管页面范围应该滚动到当前底部。这对我来说毫无意义。

【问题讨论】：

标签： javascript scroll

【解决方案1】：

包装 scrollTo 调用 window.requesteAnimationFrame 回调似乎可以解决问题。虽然我不知道为什么。

【讨论】：