This package help you drag to scroll easier🌟
preview.mp4
NPM
npm install vue-drag-scroller
YARN
yarn add vue-drag-scroller
Use with vue 3:
Register global:
//main.ts
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')//Example.vue
<template>
<div v-drag-scroller>
</div>
</template>Register local:
// Example.vue
<script>
import { dragScroller as vDragScroller } from "vue-drag-scroller"
</script>
<template>
<div v-drag-scroller>
</div>
</template>Register in Nuxt:
// plugins/vue-drag-scroller.js
import VueDragScroller from 'vue-drag-scroller'
export default defineNuxtPlugin((nuxtApp) => {
nuxtApp.vueApp.use(VueDragScroller)
})// nuxt.config.js
export default defineNuxtConfig({
plugins: ['~/plugins/vue-drag-scroller.ts'],
})you can pass options to directive like this:
<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 |
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
| 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
@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><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>
