Easy Drag To Scroll Directive For Vue 3 - drag-scroller

Install & Download:

# Yarn
$ yarn add vue-drag-scroller
# NPM
$ npm install vue-drag-scroller

Description:

drag-scroller is a Vue directive that enables users to scroll through content with mouse drag or touch swipe.

How to use it:

1. Import and register the drag-scroller.

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')

2. In your app:

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

3. Trigger functions by passing the events to the v-drag-scroller

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

const options = {
  startScroll?: (e: MouseEvent) => void
  endScroll?: (e: MouseEvent) => void
  onScrolling?: (e: MouseEvent) => void
  speed?: number
  hideScrollbar?: boolean
  reverseDirection?: boolean
};

4. Customize the drag-scroller.

<div v-drag-scroller.onlyX>
  x-axis only
</div>
<div v-drag-scroller.onlyY>
  y-axis only
</div>
<div v-drag-scroller.disablechild>
  disable the scroller in childreen
</div>
<div v-drag-scroller.drag-scroller-disable>
  disable the scroller
</div>