我对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;
}

遵循这些代码应该可以解决您的问题.

经过测试,它工作正常.

Vue.js相关问答推荐

Vuetify从同一方向旋转传送带下一个项目和上一个项目

为什么v-show需要组件的包装元素?

如何以惯用的方式触发 vue3 中同级组件的效果?

写入计算值时出错,但我没有写入任何值

在vuejs中使用表单追加时如何使用布尔值

视图中的 vue 样式不适用于 html

当用户在嵌套路由中时激活链接

如何在 Nuxt3 中使用 nuxtjs/auth-next 模块?

如何在 vue2.7 中删除 slot-scope

Vuex Mutations 和 Airbnb eslint

Vuetify 扩展面板,面板标题左侧带有图标

如果 Vuetify 自动完成没有匹配的结果,则保留输入的文本

带有参数的 Vuex 映射 Getter - 缓存?

VueJS:如何在组件数据属性中引用 this.$store

Vuetify v-data-table ,如何在 HTML 中呈现标题文本?

我如何能够在 vue js html 中以给定格式进行多项 Select 和传递数据?

将 SignalR 与 Vue.js 和 Vuex 集成

Vue Js如何在单个文件模板中使用mixins?

使用 Vue 在单个文件组件中调用渲染方法

IOS在输入焦点上显示键盘