我对Nuxt.js 3中的scllBehavior有一个问题.当我刷新页面时(当提供静态内容时),滚动条突然跳到页面的顶部.然而,在提供静态内容后,会自动滚动到前一个位置(触发刷新的位置),这在网站上造成了令人不快的" skip "效果.
如何在重新加载Nuxt3时防止卷轴返回到文档顶部,并使卷轴保持在相同的位置?
我对Nuxt.js 3中的scllBehavior有一个问题.当我刷新页面时(当提供静态内容时),滚动条突然跳到页面的顶部.然而,在提供静态内容后,会自动滚动到前一个位置(触发刷新的位置),这在网站上造成了令人不快的" skip "效果.
如何在重新加载Nuxt3时防止卷轴返回到文档顶部,并使卷轴保持在相同的位置?
如果我没有记错的话,这个问题可以通过禁用nuxt.config
中的SSR
模式来解决.
但是,有一个临时的解决方案,以便它在SSR
上工作.
您需要添加这些代码行,您可以将其添加到nuxt页面或布局中.
onMounted(() => {
if (process.client && window) {
window.history.scrollRestoration = 'auto';
}
})
确保添加平滑滚动的css
html {
scroll-behavior: smooth;
}
遵循这些代码应该可以解决您的问题.
经过测试,它工作正常.