当前位置：首页 > VUE

vue滚动实现

2026-02-10 06:08:33VUE

Vue 滚动实现方法

在 Vue 中实现滚动功能可以通过多种方式完成，以下是几种常见的方法：

使用原生滚动

在 Vue 模板中直接使用 overflow: auto 或 overflow: scroll 实现滚动效果。

<template>
  <div style="height: 200px; overflow: auto;">
    <div v-for="item in items" :key="item.id">
      {{ item.text }}
    </div>
  </div>
</template>

使用 Vue 指令实现滚动

通过 Vue 指令监听滚动事件并触发回调函数。

<template>
  <div v-scroll="handleScroll" style="height: 200px; overflow: auto;">
    <div v-for="item in items" :key="item.id">
      {{ item.text }}
    </div>
  </div>
</template>

<script>
export default {
  directives: {
    scroll: {
      inserted(el, binding) {
        el.addEventListener('scroll', binding.value);
      }
    }
  },
  methods: {
    handleScroll(event) {
      console.log('Scrolled:', event.target.scrollTop);
    }
  }
};
</script>

使用第三方库

常见的 Vue 滚动库如 vue-virtual-scroller 或 better-scroll，适用于复杂滚动需求。

npm install vue-virtual-scroller

<template>
  <RecycleScroller
    :items="items"
    :item-size="50"
    key-field="id"
    style="height: 200px;"
  >
    <template v-slot="{ item }">
      <div>{{ item.text }}</div>
    </template>
  </RecycleScroller>
</template>

<script>
import { RecycleScroller } from 'vue-virtual-scroller';
import 'vue-virtual-scroller/dist/vue-virtual-scroller.css';

export default {
  components: { RecycleScroller },
  data() {
    return {
      items: Array.from({ length: 100 }, (_, i) => ({ id: i, text: `Item ${i}` }))
    };
  }
};
</script>

平滑滚动到指定位置

使用 Element.scrollTo() 方法实现平滑滚动。

<template>
  <div ref="scrollContainer" style="height: 200px; overflow: auto;">
    <div v-for="item in items" :key="item.id" :ref="`item-${item.id}`">
      {{ item.text }}
    </div>
  </div>
  <button @click="scrollToItem(50)">Scroll to Item 50</button>
</template>

<script>
export default {
  methods: {
    scrollToItem(itemId) {
      const container = this.$refs.scrollContainer;
      const element = this.$refs[`item-${itemId}`][0];
      container.scrollTo({
        top: element.offsetTop,
        behavior: 'smooth'
      });
    }
  }
};
</script>

监听滚动到底部

通过监听滚动事件判断是否滚动到底部。

vue滚动实现

<template>
  <div ref="scrollContainer" style="height: 200px; overflow: auto;" @scroll="checkScroll">
    <div v-for="item in items" :key="item.id">
      {{ item.text }}
    </div>
  </div>
</template>

<script>
export default {
  methods: {
    checkScroll(event) {
      const { scrollTop, scrollHeight, clientHeight } = event.target;
      if (scrollHeight - (scrollTop + clientHeight) < 10) {
        console.log('Reached bottom');
      }
    }
  }
};
</script>