Vue横向滚动条拖动事件

最新推荐文章于 2025-10-09 14:23:14 发布

原创最新推荐文章于 2025-10-09 14:23:14 发布 · 198 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #前端 #ecmascript #前端框架

<template>
  <div class="scroll-container" ref="scrollContainer"
       v-on:mousedown="handleMouseDown"
       v-on:mousemove="handleMouseMove"
       v-on:mouseup="handleMouseUp">
    <div class="scroll-content">
      <!-- 横向内容 -->
    </div>
  </div>
</template>

<style>
.scroll-container {
  overflow-x: scroll;
  white-space: nowrap;
}

.scroll-content {
  /* 横向内容样式 */
}
</style>
<script setup lang="ts">
import { ref } from 'vue'

let isDragging = false
let startX = 0
let scrollLeft = 0

const scrollContainer = ref(null)

function handleMouseDown(event: MouseEvent) {
  isDragging = true;
  startX = event.clientX;
  scrollLeft = scrollContainer.value.scrollLeft;
}

function handleMouseMove(event: MouseEvent) {
  if (!isDragging) return;
  const x = event.clientX - startX;
  scrollContainer.value.scrollLeft = scrollLeft - x;
}

function handleMouseUp() {
  isDragging = false;
}
</script>