当前位置：首页 > VUE

vue 实现滚动

2026-03-07 02:22:09VUE

Vue 实现滚动的方法

使用原生滚动

在 Vue 中可以直接使用原生 HTML 的滚动属性，通过 CSS 控制滚动区域的高度和溢出行为。

<template>
  <div class="scroll-container">
    <div v-for="item in items" :key="item.id">{{ item.text }}</div>
  </div>
</template>

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

使用 Vue 的 `ref` 和 `scrollTo` 方法

通过 Vue 的 ref 获取 DOM 元素，调用 scrollTo 方法实现精确滚动控制。

vue 实现滚动

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

<script>
export default {
  data() {
    return {
      items: [...]
    };
  },
  methods: {
    scrollToBottom() {
      const container = this.$refs.scrollContainer;
      container.scrollTo({
        top: container.scrollHeight,
        behavior: 'smooth'
      });
    }
  }
};
</script>

使用第三方库 `vue-scrollto`

安装 vue-scrollto 插件，可以轻松实现平滑滚动效果。

vue 实现滚动

npm install vue-scrollto

<template>
  <div class="scroll-container" ref="container">
    <div v-for="item in items" :key="item.id">{{ item.text }}</div>
  </div>
  <button v-scroll-to="{
    el: '#target',
    container: 'container',
    duration: 1000
  }">滚动到目标</button>
</template>

<script>
import VueScrollTo from 'vue-scrollto';

export default {
  directives: {
    'scroll-to': VueScrollTo.directive
  }
};
</script>

监听滚动事件

通过 @scroll 监听滚动事件，实现自定义逻辑（如无限滚动）。

<template>
  <div class="scroll-container" @scroll="handleScroll">
    <div v-for="item in items" :key="item.id">{{ item.text }}</div>
  </div>
</template>

<script>
export default {
  methods: {
    handleScroll(event) {
      const { scrollTop, clientHeight, scrollHeight } = event.target;
      if (scrollTop + clientHeight >= scrollHeight - 50) {
        this.loadMoreItems();
      }
    }
  }
};
</script>

使用 `IntersectionObserver` 实现懒加载

结合 IntersectionObserver 监听元素是否进入视口，实现高效滚动加载。

<template>
  <div class="scroll-container">
    <div v-for="item in items" :key="item.id" ref="items">{{ item.text }}</div>
  </div>
</template>

<script>
export default {
  mounted() {
    const observer = new IntersectionObserver((entries) => {
      entries.forEach(entry => {
        if (entry.isIntersecting) {
          this.loadItem(entry.target.dataset.id);
        }
      });
    });

    this.$refs.items.forEach(item => {
      observer.observe(item);
    });
  }
};
</script>