当前位置：首页 > VUE

vue实现水平滚动

2026-02-11 07:32:14VUE

vue实现水平滚动的几种方法

使用CSS样式控制

在Vue组件中通过CSS的overflow-x和white-space属性实现水平滚动效果。这种方法适用于简单的横向列表布局。

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

<style scoped>
.scroll-container {
  width: 100%;
  overflow-x: auto;
  white-space: nowrap;
}
.scroll-content {
  display: inline-block;
}
.scroll-item {
  display: inline-block;
  width: 200px;
  height: 100px;
  margin-right: 10px;
  background: #eee;
}
</style>

使用第三方库

对于更复杂的交互需求，可以使用专门的水平滚动库如vue-horizontal-scroll：

安装依赖：

npm install vue-horizontal-scroll

组件实现：

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

<script>
import VueHorizontal from "vue-horizontal-scroll";

export default {
  components: { VueHorizontal },
  data() {
    return {
      items: [...]
    }
  }
}
</script>

自定义滚动组件

通过监听触摸事件和鼠标事件实现自定义滚动行为：

<template>
  <div 
    class="custom-scroll"
    ref="scrollContainer"
    @mousedown="startDrag"
    @mousemove="onDrag"
    @mouseup="endDrag"
    @mouseleave="endDrag"
    @touchstart="startDrag"
    @touchmove="onDrag"
    @touchend="endDrag"
  >
    <div class="content">
      <slot></slot>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isDragging: false,
      startX: 0,
      scrollLeft: 0
    }
  },
  methods: {
    startDrag(e) {
      this.isDragging = true
      this.startX = e.pageX || e.touches[0].pageX
      this.scrollLeft = this.$refs.scrollContainer.scrollLeft
    },
    onDrag(e) {
      if (!this.isDragging) return
      const x = e.pageX || e.touches[0].pageX
      const walk = (x - this.startX) * 2
      this.$refs.scrollContainer.scrollLeft = this.scrollLeft - walk
    },
    endDrag() {
      this.isDragging = false
    }
  }
}
</script>

使用CSS Scroll Snap

现代CSS的Scroll Snap特性可以提供更好的滚动体验：

.scroll-snap-container {
  scroll-snap-type: x mandatory;
  overflow-x: scroll;
  display: flex;
}

.scroll-snap-item {
  scroll-snap-align: start;
  flex: 0 0 auto;
  width: 80vw;
}