当前位置：首页 > VUE

vue 实现div上下滚动

2026-02-23 01:57:22VUE

实现 div 上下滚动的几种方法

使用 CSS 的 `overflow-y` 属性

通过设置 CSS 的 overflow-y: scroll 或 overflow-y: auto，可以让 div 在内容超出高度时显示滚动条。

<div style="height: 200px; overflow-y: auto;">
  <!-- 内容超出高度时会显示滚动条 -->
  <p>内容1</p>
  <p>内容2</p>
  <p>内容3</p>
  <!-- 更多内容 -->
</div>

使用 Vue 的指令控制滚动

可以通过 Vue 的指令动态控制滚动行为，例如点击按钮滚动到顶部或底部。

<template>
  <div>
    <div ref="scrollContainer" style="height: 200px; overflow-y: auto;">
      <p v-for="item in items" :key="item">{{ item }}</p>
    </div>
    <button @click="scrollToTop">滚动到顶部</button>
    <button @click="scrollToBottom">滚动到底部</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: ['内容1', '内容2', '内容3', '内容4', '内容5']
    };
  },
  methods: {
    scrollToTop() {
      this.$refs.scrollContainer.scrollTop = 0;
    },
    scrollToBottom() {
      const container = this.$refs.scrollContainer;
      container.scrollTop = container.scrollHeight;
    }
  }
};
</script>

使用 Vue 的动画实现平滑滚动

可以通过 JavaScript 的 scrollTo 方法结合动画实现平滑滚动效果。

<template>
  <div>
    <div ref="scrollContainer" style="height: 200px; overflow-y: auto;">
      <p v-for="item in items" :key="item">{{ item }}</p>
    </div>
    <button @click="smoothScrollToBottom">平滑滚动到底部</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: ['内容1', '内容2', '内容3', '内容4', '内容5']
    };
  },
  methods: {
    smoothScrollToBottom() {
      const container = this.$refs.scrollContainer;
      const target = container.scrollHeight;
      const duration = 500; // 动画持续时间（毫秒）
      const start = container.scrollTop;
      const change = target - start;
      const startTime = performance.now();

      const animateScroll = (currentTime) => {
        const elapsed = currentTime - startTime;
        const progress = Math.min(elapsed / duration, 1);
        container.scrollTop = start + change * progress;
        if (progress < 1) {
          requestAnimationFrame(animateScroll);
        }
      };
      requestAnimationFrame(animateScroll);
    }
  }
};
</script>

使用第三方库实现更复杂的滚动

如果需要更复杂的滚动效果（如无限滚动、虚拟滚动），可以借助第三方库如 vue-virtual-scroller 或 vue-infinite-loading。

安装 vue-virtual-scroller：

npm install vue-virtual-scroller

示例代码：

<template>
  <RecycleScroller
    class="scroller"
    :items="items"
    :item-size="50"
    key-field="id"
  >
    <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: `内容 ${i}`
      }))
    };
  }
};
</script>

<style>
.scroller {
  height: 200px;
}
</style>

以上方法可以根据需求选择，从简单的 CSS 滚动到复杂的虚拟滚动均可实现。

vue 实现div上下滚动