scrollTo无法回到顶部问题

起因

在动态路由参数发生变化后，我在beforeRouteUpdate中使用scrollTo无法回到到页面顶部
试了一下几种办法，都没有成功

// 1
 window.scrollTo({
   top: 0,
   behavior: "smooth",
 });
 next();
 // 2
 this.$nextTick(() => {
  window.scrollTo({
   top: 0,
   behavior: "smooth",
 });
  next();
});
// 3
document.documentElement.scrollTop = 0;
document.body.scrollTop = 0;

问题排查

后来百度一下，对一下几点进行逐一排查：

• 检查页面结构： 确保页面的 HTML 结构正确，没有意外的包裹元素或者不必要的滚动容器。有时候，不正确的 HTML 结构可能会干扰滚动操作。

• 检查 CSS 样式： 检查页面中的 CSS 样式，特别是对于 html 和 body 元素的样式。有些 CSS 样式可能会影响到页面的滚动行为，比如设置了 overflow: hidden 或者 height: 100%。

• 排查可能的冲突： 检查是否有其他 JavaScript 代码或者库与滚动操作产生冲突。有时候，其他代码可能会干扰到滚动操作的执行。

• 浏览器兼容性： 确保代码在不同的浏览器中都能正常工作。不同的浏览器可能对滚动操作的支持程度有所不同，需要进行兼容性测试。

• 其他全局滚动事件监听器： 检查代码中是否存在其他可能影响滚动行为的全局滚动事件监听器，可能会与你的滚动逻辑产生冲突。这些监听器可能来自于第三方库或自定义代码。

• 浏览器扩展或插件： 有时候安装在浏览器上的扩展或插件可能会干扰页面的默认行为，包括滚动行为。尝试在没有任何扩展或插件的情况下测试滚动是否正常工作。

• 浏览器安全策略： 在某些情况下，浏览器的安全策略可能会限制页面的滚动行为，尤其是在使用 iframe 或在受保护的环境中加载页面时。确保没有任何安全策略会干扰到滚动操作。

• 检查滚动容器： 如果页面中存在滚动容器，比如一个具有固定高度并且设置了 overflow: auto 或 overflow: scroll 的元素，确保滚动操作应用到正确的容器上。

• 调试工具： 使用浏览器的开发者工具进行调试，检查滚动操作是否被正确执行，以及是否存在任何错误或警告信息。

• 尝试在不同环境中测试： 尝试在不同的浏览器、不同的设备或者不同的网络环境下进行测试，看看是否存在特定环境下的问题。

解决

终于发现了问题：

// 我在容器内部设置了高度和scroll ，把高度删掉就解决了
// height: 100vh;
overflow-y: scroll;