起因
在动态路由参数发生变化后,我在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;