当前位置：首页 > VUE

vue实现页面滚动效果

2026-02-24 04:37:29VUE

Vue 实现页面滚动效果的方法

使用 Vue Router 的滚动行为

在 Vue Router 中可以通过 scrollBehavior 方法自定义页面切换时的滚动行为。以下是一个配置示例：

const router = new VueRouter({
  routes: [...],
  scrollBehavior(to, from, savedPosition) {
    if (savedPosition) {
      return savedPosition
    } else if (to.hash) {
      return {
        selector: to.hash
      }
    } else {
      return { x: 0, y: 0 }
    }
  }
})

这段代码实现了：

当用户点击后退/前进按钮时恢复到之前的位置
支持路由哈希定位
默认滚动到页面顶部

使用原生 JavaScript 实现平滑滚动

在 Vue 组件中可以通过 window.scrollTo 实现平滑滚动效果：

methods: {
  smoothScroll() {
    window.scrollTo({
      top: 500,
      behavior: 'smooth'
    })
  }
}

也可以使用传统的 scrollIntoView 方法：

document.getElementById('target').scrollIntoView({
  behavior: 'smooth'
})

使用第三方库 vue-scrollto

安装 vue-scrollto 库：

vue实现页面滚动效果

npm install vue-scrollto

在 Vue 中使用：

import VueScrollTo from 'vue-scrollto'
Vue.use(VueScrollTo)

模板中使用指令：

<button v-scroll-to="'#element'">滚动到元素</button>
<div id="element">目标元素</div>

配置选项示例：

vue实现页面滚动效果

Vue.use(VueScrollTo, {
  duration: 500,
  easing: "ease",
  offset: -50
})

监听滚动事件

在 Vue 组件中添加滚动事件监听：

mounted() {
  window.addEventListener('scroll', this.handleScroll)
},
beforeDestroy() {
  window.removeEventListener('scroll', this.handleScroll)
},
methods: {
  handleScroll() {
    const scrollPosition = window.scrollY
    if (scrollPosition > 100) {
      // 执行某些操作
    }
  }
}

实现无限滚动

结合 Intersection Observer API 实现无限滚动：

data() {
  return {
    observer: null
  }
},
mounted() {
  this.observer = new IntersectionObserver((entries) => {
    if (entries[0].isIntersecting) {
      this.loadMore()
    }
  })
  this.observer.observe(this.$refs.loader)
},
methods: {
  loadMore() {
    // 加载更多数据
  }
}

模板中添加观察元素：