This package help you drag to scroll easier🌟
https://github.com/huynamboz/vue-drag-scroller/assets/38585889/20139bab-0004-4249-8826-70959f6dbc77
NPM
npm install vue-drag-scroller
YARN
yarn add vue-drag-scroller
Use with vue 3:
Register global:
import { createApp } from 'vue'
import VueDragScroller from "vue-drag-scroller"
import App from './App.vue'
const app = createApp(App)
app.use(VueDragScroller)
app.mount('#app')
// in component
<template>
<div v-drag-scroller>
</div>
</template>
you can pass options to directive like this:
<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 |
you can pass binding value to directive like this:
<template>
<div v-drag-scroller.onlyX>
</div>
</template>
Name | Description | Type | Default |
---|---|---|---|
disablechild | Disable drag scroll in all child | Boolean | false |
drag-scroller-disable | Disable drag scroll in particular 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
Name | Description |
---|---|
startScroll | Trigger when start scroll |
endScroll | Trigger when end scroll |
onScrolling | Trigger when drag and move mouse |
<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>
<template>
<div v-drag-scroller.disablechild>
<div class="child">
</div>
<div class="child">
</div>
</div>
</template>
<template>
<div v-drag-scroller>
<div class="child" drag-scroller-disable> // disable drag scroll
</div>
<div class="child">
</div>
</div>
</template>
<template>
<div v-drag-scroller.onlyX>
</div>
</template>
<template>
<div v-drag-scroller.onlyY>
</div>
</template>
<template>
<div v-drag-scroller={
hideScrollbar: true
}>
</div>
</template>
<template>
<div v-drag-scroller={
speed: 0.5 // default is 1
}>
</div>
</template>
<template>
<div v-drag-scroller={
reverseDirection: true
}>
</div>
</template>
<template>
<div v-drag-scroller
@scrollStart="onScroll"
@scrollEnd="onEndScroll"
@scrollMoving="onScrolling"
>
</div>
</template>
<template>
<div v-drag-scroller
v-on:scrollStart="onScroll"
v-on:scrollEnd="onEndScroll"
v-on:scrollMoving="onScrolling"
>
</div>
</template>