当前位置：首页 > VUE

vue实现拖拽滚动

2026-01-17 11:29:00VUE

Vue 实现拖拽滚动的方法

在 Vue 中实现拖拽滚动功能，可以通过监听鼠标事件并结合 CSS 或 JavaScript 控制滚动行为。以下是几种常见的实现方式：

使用原生事件监听

通过监听 mousedown、mousemove 和 mouseup 事件，结合 scrollLeft 和 scrollTop 属性实现拖拽滚动。

<template>
  <div
    ref="scrollContainer"
    class="scroll-container"
    @mousedown="startDrag"
    @mousemove="onDrag"
    @mouseup="endDrag"
    @mouseleave="endDrag"
  >
    <div class="content">
      <!-- 可滚动内容 -->
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isDragging: false,
      startX: 0,
      startY: 0,
      scrollLeft: 0,
      scrollTop: 0,
    };
  },
  methods: {
    startDrag(e) {
      this.isDragging = true;
      this.startX = e.pageX;
      this.startY = e.pageY;
      this.scrollLeft = this.$refs.scrollContainer.scrollLeft;
      this.scrollTop = this.$refs.scrollContainer.scrollTop;
    },
    onDrag(e) {
      if (!this.isDragging) return;
      const x = e.pageX;
      const y = e.pageY;
      const walkX = (this.startX - x) * 2; // 调整拖拽灵敏度
      const walkY = (this.startY - y) * 2;
      this.$refs.scrollContainer.scrollLeft = this.scrollLeft + walkX;
      this.$refs.scrollContainer.scrollTop = this.scrollTop + walkY;
    },
    endDrag() {
      this.isDragging = false;
    },
  },
};
</script>

<style>
.scroll-container {
  overflow: auto;
  cursor: grab;
}
.scroll-container:active {
  cursor: grabbing;
}
</style>

使用第三方库

如果需要更复杂的拖拽滚动功能，可以使用第三方库如 vue-draggable 或 sortablejs。

安装 sortablejs：

npm install sortablejs

在 Vue 中使用：

<template>
  <div ref="scrollContainer" class="scroll-container">
    <div class="content">
      <!-- 可拖拽滚动的内容 -->
    </div>
  </div>
</template>

<script>
import Sortable from 'sortablejs';

export default {
  mounted() {
    new Sortable(this.$refs.scrollContainer, {
      animation: 150,
      onStart: () => {
        this.$refs.scrollContainer.style.cursor = 'grabbing';
      },
      onEnd: () => {
        this.$refs.scrollContainer.style.cursor = 'grab';
      },
    });
  },
};
</script>

使用 CSS 属性

对于简单的拖拽滚动效果，可以直接使用 CSS 的 scroll-snap 属性实现平滑滚动。

<template>
  <div class="scroll-container">
    <div class="content">
      <!-- 内容区块 -->
    </div>
  </div>
</template>

<style>
.scroll-container {
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  cursor: grab;
}
.content {
  display: flex;
  scroll-snap-align: start;
}
</style>