关于手动实现滚动的尝试

html 复制代码

<div class="tags-box" ref="draggableDiv" @mousedown="startDrag">
    <div class="tag-item active">全部</div>
    <div class="tag-item">分类1</div>
    <div class="tag-item">分类2</div>
    <div class="tag-item">分类3</div>
    <div class="tag-item">分类3</div>
</div>

js 复制代码

let ishasDragged = false; // 鼠标是否被拖拽 拖拽玩后不进行type选择
const draggableDiv = ref(null);
let isDragging = false;
let offsetX = 0;
const startDrag = (e) => {
    console.log("startDrag",draggableDiv.value.scrollLeft)
    isDragging = true;
    offsetX = e.clientX
};

const drag = (e) => {
    if (!isDragging) return;
    e.preventDefault();
    console.log("drag",e.clientX)
    const x = offsetX - e.clientX
    offsetX = e.clientX
    if(x !== 0) {
        ishasDragged = true
    }
    draggableDiv.value.scrollLeft = draggableDiv.value.scrollLeft + x
};

const stopDrag = () => {
    isDragging = false;
    // 防止移动完后直接选择
    setTimeout(() => {
        ishasDragged = false
    }, 0)
};

onMounted(() => {
    window.addEventListener('mousemove', drag);
    window.addEventListener('mouseup', stopDrag);
})

onUnmounted(()=> {
    window.removeEventListener('mousemove', drag);
    window.removeEventListener('mouseup', stopDrag);
})

css 复制代码

.tags-box{
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE and Edge */
}