Vue 项目中 document.documentElement.scrollTop 设置无效， 一直都是0 的问题记录

问题

在 Vue 项目中，我遇到一个问题，就是使用 document.documentElement.scrollTop 设置滚动条位置无效，导致滚动条位置一直为 0。这使得我无法实现页面滚动时头部吸顶的效果。

解决方案：

经过一番调查，我发现这个问题是由 Vue 路由引起的。当路由发生变化时，页面会重新加载，导致滚动条位置被重置为 0。为了解决这个问题，我需要在路由变化后重新设置滚动条位置。

具体步骤如下：

1. 在 Vue 项目中安装 vue-router-scroll-position 插件。这个插件可以帮助我们保存和恢复滚动条位置。

2. 在 Vue 根实例中使用 vue-router-scroll-position 插件。

import VueRouterScrollPosition from 'vue-router-scroll-position'

Vue.use(VueRouterScrollPosition)

3. 在路由配置中，为每个路由添加 scrollBehavior 选项。这个选项可以指定路由变化后如何设置滚动条位置。

const routes = [
  {
    path: '/',
    component: Home,
    scrollBehavior (to, from, savedPosition) {
      if (savedPosition) {
        return savedPosition
      } else {
        return { x: 0, y: 0 }
      }
    }
  },
  {
    path: '/about',
    component: About,
    scrollBehavior (to, from, savedPosition) {
      if (savedPosition) {
        return savedPosition
      } else {
        return { x: 0, y: 0 }
      }
    }
  }
]

4. 在组件中使用 vue-router-scroll-position 插件提供的 scrollTo 方法来设置滚动条位置。

export default {
  methods: {
    scrollToTop () {
      this.$scrollTo({ x: 0, y: 0 })
    }
  }
}

通过以上步骤，我成功地解决了 Vue 项目中使用 document.documentElement.scrollTop 设置无效的问题，并实现了页面滚动时头部吸顶的效果。

注意：

在使用 vue-router-scroll-position 插件时，需要注意以下几点：

• 该插件只适用于 Vue 路由 2.0 以上版本。
• 该插件需要在 Vue 根实例中使用，否则无法生效。
• 在路由配置中，每个路由的 scrollBehavior 选项必须返回一个对象，该对象包含 x 和 y 两个属性，分别代表滚动条的水平和垂直位置。
• 如果不希望在路由变化后恢复滚动条位置，可以在 scrollBehavior 选项中返回 false。

希望这篇博文能帮助到您解决 Vue 项目中使用 document.documentElement.scrollTop 设置无效的问题。如果您有任何问题，请随时留言。