返回页面时保持滚动位置 [英] Keep scroll position when returning to page

问题描述

我在页面 A 上有一个很长的列表，我正在滚动浏览.当我访问另一个页面然后返回到页面 A 时，我希望在我离开的滚动位置.

I have a long list on page A that I am scrolling through. When I visit another page and later return to page A, I want to be at the scroll position where I left.

我为 Vue 找到了这个包(https://github.com/jeneser/vue-滚动行为)，但我无法让它与 NuxtJS 一起使用.

I have found this package for Vue (https://github.com/jeneser/vue-scroll-behavior), but I can't get it to work with NuxtJS.

关于我如何最好地解决这个问题的任何建议或想法?

Any advice or ideas on how I best approach this?

推荐答案

您可以按照此处所述更改路线更改时的滚动行为https://nuxtjs.org/api/configuration-router#scrollBehaviornuxt.config.js.就我而言，我仅将其应用于/browse"路线.

You can alter the scroll behaviour on route change as described here https://nuxtjs.org/api/configuration-router#scrollBehavior by adapting it in nuxt.config.js. In my case I only apply this to the "/browse" route.

function scrollBehavior (to, from, savedPosition) {
  ...
  if (to.path === '/browse') {
   position = false
  }
  ...
}

我们必须将 position 设置为 false 以保留滚动位置.

We have to set the position to false to retain the scroll position.

为了记住滚动位置，我们可以使用像 https://github.com/jeneser 这样的包/vue-scroll-behavior 我们可以将其作为插件包含在 nuxt 中:

To remember the scroll position we can use a package like https://github.com/jeneser/vue-scroll-behavior which we can include as a plugin into nuxt:

import Vue from 'vue'
import vueScrollBehavior from 'vue-scroll-behavior'

export default ({ app }) => {
  Vue.use(vueScrollBehavior, {
    router: app.router
  })
}

这篇关于返回页面时保持滚动位置的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！