vue实现滚动视图

Vue 实现滚动视图的方法

使用原生滚动

通过CSS设置容器高度和overflow-y: auto实现基础滚动。适用于简单场景，无需额外依赖。

<template>
  <div class="scroll-container">
    <!-- 长内容 -->
  </div>
</template>

<style>
.scroll-container {
  height: 300px;
  overflow-y: auto;
  border: 1px solid #eee;
}
</style>

使用第三方库（better-scroll）

对于复杂交互（如惯性滚动、边界回弹），推荐使用better-scroll库。需先安装依赖：

npm install @better-scroll/core

实现代码示例：

<template>
  <div ref="wrapper" class="scroll-wrapper">
    <div class="scroll-content">
      <!-- 滚动内容 -->
    </div>
  </div>
</template>

<script>
import BScroll from '@better-scroll/core'

export default {
  mounted() {
    this.bs = new BScroll(this.$refs.wrapper, {
      scrollY: true,
      click: true
    })
  },
  beforeDestroy() {
    this.bs.destroy()
  }
}
</script>

<style>
.scroll-wrapper {
  height: 400px;
  overflow: hidden;
}
</style>

监听滚动事件

需要获取滚动位置时，可通过@scroll事件绑定：

<template>
  <div class="custom-scroll" @scroll="handleScroll">
    <!-- 内容 -->
  </div>
</template>

<script>
export default {
  methods: {
    handleScroll(e) {
      console.log('滚动位置:', e.target.scrollTop)
    }
  }
}
</script>

滚动到指定位置

通过ref获取DOM元素并调用原生方法：

methods: {
  scrollToTop() {
    this.$refs.scrollContainer.scrollTo({
      top: 0,
      behavior: 'smooth'
    })
  }
}

注意事项

• 移动端需添加-webkit-overflow-scrolling: touch增强滚动体验
• 动态内容加载后，better-scroll需调用refresh()方法更新滚动区域计算
• 性能优化建议：对滚动事件使用防抖/节流，避免频繁触发逻辑