Configs

Here is a list of all the configurations.

General

Example

<script setup>
import { ref } from 'vue'
const options = ref({
    startScroll: () => {
        console.log("start scroll");
    },
    endScroll: () => {
        console.log("end scroll");
    },
    speed: 1, // default is 1
    reverseDirection: false, // default is false
    hideScrollbar: false, // default is false
});
</script>

<template>
    <div v-drag-scroller="options">
    </div>
</template>

Name	Description	Type	Default
startScroll	Trigger when start scroll	Function	null
endScroll	Trigger when end scroll	Function	null
speed	Speed of scroll	Number	1
hideScrollbar	Hide scrollbar	Boolean	false
reverseDirection	Reverse direction of scroll	Boolean	false

Binding value:

you can pass binding value to directive like this:

<template>
    <div v-drag-scroller.onlyX>
    </div>
</template>

<template>
    <div v-drag-scroller.disablechild>
    </div>
</template>

Name	Description	Type	Default
disablechild	Disable drag scroll in all child	Boolean	false
onlyX	Only scroll in X axis	Boolean	false
onlyY	Only scroll in Y axis	Boolean	false

Priority: disablechild > drag-scroller-disable > onlyX > onlyY

Events (use in options):

Name	Description
startScroll	Trigger when start scroll
endScroll	Trigger when end scroll
onScrolling	Trigger when drag and move mouse

Example

<script setup>
const onScroll = (e) => {
  console.log("working",e);
};

const onEndScroll = (e) => {
  console.log("end scroll",e);
};

const options = {
    startScroll: onScroll,
    endScroll: onEndScroll,
};

</script>

// in component 
<template>
    <div v-drag-scroller="options">
    </div>
</template>