Question

我在A页上滚动浏览一长串。当我访问另一页并稍后返回到A页时，我想位于离开的滚动位置。

我已经找到了用于Vue（https://github.com/jeneser/vue-scroll-behavior）的软件包，但是我无法使其与NuxtJS一起使用。

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

Answer 1

您可以按照此处所述更改路线更改时的滚动行为 https://nuxtjs.org/api/configuration-router#scrollBehavior通过在nuxt.config.js中进行调整。就我而言，我仅将其应用于“ /浏览”路线。

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

我们必须将position设置为false才能保持滚动位置。

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

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

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

Answer 2

您可以这样使用（您必须在根目录中将其命名为 router.scrollBehavior.js ，以覆盖默认行为设置。），

export default function(to, from, savedPosition) {
  const defaultPosition = false;
  const scrollTopPosition = { x: 0, y: 0 };

  let position = defaultPosition;
  console.log({ to, from });
  if (savedPosition) {
    position = savedPosition;
  } else if (to.matched.length < 2) {
    position = scrollTopPosition;
  } else if (to.matched.some(child => child.components.default.options.scrollToTop)) {
    position = scrollTopPosition;
  }

  return new Promise(resolve => {
    window.$nuxt.$once('triggerScroll', () => {
      if (to.hash && document.querySelector(to.hash)) {
        position = { selector: to.hash };
      }

      resolve(position);
    });
  });
}

Answer 3

/**
 use:
 ```js
  import router from "<you router path>"
  import KeepScroll from "<you code path>"
  Vue.use(KeepScroll, { router })
 ```
and set `keep-scroll-postion` u need save scroll position.
```html
<div v-keep-scroll-postion>
... more
... more
... more
... more
</div>
```
 */

import Router from 'vue-router';
import Vue, { PluginObject } from "vue"

/// keep-alive-scroll-postion-value
const AttributeParamName = "k-l-s-p-v"

/// create custom directive to save scroll position
const configureCustomDirective = () => {
  Vue.directive("keep-scroll-postion", {
    bind: function (el) {
      el.addEventListener("scroll", (event) => {
        const target = event.target as HTMLElement
        if (target === undefined) return
        target.setAttribute(AttributeParamName, target.scrollLeft + '-' + target.scrollTop);
      })
    }
  })
}

interface VueKeepScrollPositionPlugin {
  router: Router
}

const VueKeepScrollPositionPlugin: PluginObject<VueKeepScrollPositionPlugin> = {
  install(vue, option) {
    if (option?.router === undefined) return
    configureCustomDirective()
    const findAndConfigScrollPostion = () => {
      document.querySelectorAll(`[${AttributeParamName}]`).forEach(element => {
        const offset = element.getAttribute(AttributeParamName)?.split("-")
        if (offset === undefined) return
        element.scrollTop = Number.parseFloat(offset[1])
        element.scrollLeft = Number.parseFloat(offset[0])
      })
    }
    option?.router.afterEach(() => vue.nextTick(() => findAndConfigScrollPostion()))
  }
}

export default VueKeepScrollPositionPlugin;

也许是吗？ https://gist.github.com/0x30/8b850f24b9452d715f356a2df968183f

Answer 4

检查您的 CSS 并删除您的 html/body-tag 上的溢出属性。

html,
body {
    overflow-x: hidden; // ? Remove this
}

之后您的滚动位置应再次保存。

返回页面时保持滚动位置

4 个答案: