vue3关于拖拽滚动区域的自定义指令

前置准备

• 需要提前定义全局css类 hide-scrollbar

.hide-scrollbar {
    overflow: auto;
    scrollbar-width: none; /* Firefox 64 */
    -ms-overflow-style: none; /* IE 11 */

    &::-webkit-scrollbar {
        display:none;
    }
}

• js文件

/**
 * @param horizontal 开启横向移动
 * @param vertical 开启纵向移动
 * @param hide 隐藏滚动条
 * @type {{beforeUnmount(*): void, mounted(*, *): void}}
 */
export const vScroll = {
    mounted(el,binding) {
        const {modifiers} = binding
        const horizontal = modifiers.horizontal
        const vertical = modifiers.vertical
        const hide = modifiers.hide

        let startX = 0
        let startY = 0
        let initX = 0
        let initY = 0

        if(hide) {
            el.classList.add('hide-scrollbar');
        }

        function onMouseMove(event) {
            event.preventDefault();
            el.style.cursor = "grabbing"
            if(horizontal) {
                el.scrollLeft = startX - event.clientX + initX
            }
            if(vertical) {
                el.scrollTop = startY - event.clientY + initY
            }
        }

        function onMouseUp() {
            el.style.cursor = "grab"
            document.removeEventListener("mousemove",onMouseMove);
            document.removeEventListener("mouseup",onMouseUp);
        }

        el.addEventListener("mousedown",function(event) {
            el.style.cursor = "grabbing"
            startX = event.clientX;
            startY = event.clientY;

            initX = el.scrollLeft
            initY = el.scrollTop

            document.addEventListener("mousemove",onMouseMove);
            document.addEventListener("mouseup",onMouseUp);
        });

        el.addEventListener('mouseover', function() {
            el.style.cursor = "grab"
        });
        el.addEventListener('mouseout', function() {
            el.style.cursor = "default"
        });
    },
    beforeUnmount(el) {
        el.removeEventListener("mousedown")
        el.removeEventListener("mouseover")
        el.removeEventListener("mouseout")
    }
};

• 示例

<script setup>
import { vScroll} from "./vScroll.js"
</script>
<template>
	<div v-scroll.horizontal.hide style="width: 200px;overflow: auto;">
		<p style="width: 500px"></p>
	</div>
</template>