1.8.6 • Published 9 months ago
vue-drag-scroller v1.8.6
Vue drag scroller ⚡️
This package help you drag to scroll easier🌟
https://github.com/huynamboz/vue-drag-scroller/assets/38585889/20139bab-0004-4249-8826-70959f6dbc77
How to install🔖
NPM
npm install vue-drag-scroller
YARN
yarn add vue-drag-scroller
Install🔖
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'],
})
Config🔖
Options:
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 |
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>
Events Listener with v-on or @
Example with @
<template>
<div v-drag-scroller
@scrollStart="onScroll"
@scrollEnd="onEndScroll"
@scrollMoving="onScrolling"
>
</div>
</template>
Example with v-on
<template>
<div v-drag-scroller
v-on:scrollStart="onScroll"
v-on:scrollEnd="onEndScroll"
v-on:scrollMoving="onScrolling"
>
</div>
</template>
Drag parent except all child
Example
<template>
<div v-drag-scroller.disablechild>
<div class="child">
</div>
<div class="child">
</div>
</div>
</template>
Drag parent except particular child
Example
<template>
<div v-drag-scroller>
<div class="child" drag-scroller-disable> // disable drag scroll
</div>
<div class="child">
</div>
</div>
</template>
Only scroll in X axis
Example
<template>
<div v-drag-scroller.onlyX>
</div>
</template>
Only scroll in Y axis
Example
<template>
<div v-drag-scroller.onlyY>
</div>
</template>
Hide scrollbar
Example
<template>
<div v-drag-scroller={
hideScrollbar: true
}>
</div>
</template>
Change speed of scroll
Example
<template>
<div v-drag-scroller={
speed: 0.5 // default is 1
}>
</div>
</template>
Change direction of scroll
Example
<template>
<div v-drag-scroller={
reverseDirection: true
}>
</div>
</template>
1.8.6
9 months ago
1.8.2
12 months ago
1.8.1
1 year ago
1.8.5
11 months ago
1.8.4
11 months ago
1.8.3
12 months ago
1.8.0
1 year ago
1.7.1
1 year ago
1.7.0
1 year ago
1.5.3
1 year ago
1.6.0
1 year ago
1.5.2
1 year ago
1.5.1
1 year ago
1.5.0
1 year ago
1.2.0
2 years ago
1.4.0
2 years ago
1.3.0
2 years ago
1.1.4
2 years ago
1.1.3
2 years ago
1.1.2
2 years ago
1.1.1
2 years ago
1.1.0
2 years ago
1.0.0
2 years ago