当前位置：首页 > VUE

vue滚动实现

2026-01-07 20:50:39VUE

Vue 滚动实现方法

使用原生滚动

在 Vue 中可以通过 ref 获取 DOM 元素，调用原生滚动方法实现滚动效果。适用于简单场景。

<template>
  <div ref="scrollContainer" class="scroll-container">
    <div v-for="item in list" :key="item.id">{{ item.text }}</div>
  </div>
  <button @click="scrollToBottom">滚动到底部</button>
</template>

<script>
export default {
  data() {
    return {
      list: [...]
    }
  },
  methods: {
    scrollToBottom() {
      const container = this.$refs.scrollContainer
      container.scrollTop = container.scrollHeight
    }
  }
}
</script>

<style>
.scroll-container {
  height: 300px;
  overflow-y: auto;
}
</style>

使用 Vue 插件

vue-scrollto 插件提供更丰富的滚动功能，支持平滑滚动、偏移量等配置。

安装插件：

npm install vue-scrollto

使用示例：

import VueScrollTo from 'vue-scrollto'

Vue.use(VueScrollTo)

// 组件内使用
this.$scrollTo('#target', 500, {
  easing: 'ease-in',
  offset: -50
})

自定义指令实现滚动

通过自定义指令封装滚动逻辑，提高代码复用性。

Vue.directive('scroll', {
  inserted: function(el, binding) {
    el.style.overflow = 'auto'
    el.style.height = binding.value.height || '300px'

    if (binding.value.scrollTo) {
      el.scrollTop = binding.value.scrollTo
    }
  }
})

滚动事件监听

监听滚动事件实现无限滚动等复杂功能。

export default {
  mounted() {
    window.addEventListener('scroll', this.handleScroll)
  },
  beforeDestroy() {
    window.removeEventListener('scroll', this.handleScroll)
  },
  methods: {
    handleScroll() {
      const scrollPosition = window.pageYOffset
      const windowHeight = window.innerHeight
      const documentHeight = document.body.clientHeight

      if (scrollPosition + windowHeight >= documentHeight - 100) {
        this.loadMore()
      }
    }
  }
}

滚动性能优化

使用 requestAnimationFrame 优化滚动性能，避免卡顿。

let ticking = false

window.addEventListener('scroll', function() {
  if (!ticking) {
    window.requestAnimationFrame(function() {
      // 执行滚动相关操作
      ticking = false
    })
    ticking = true
  }
})