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>

Preview:

drag-scroll-directive

Changelog:

v1.8.0 (04/05/2024)

  • add listener to element

v1.7.0 (02/27/2024)

  • feat: option reverse direction

v1.6.0 (01/27/2024)

  • add new option hidescrollbar
  • Clean code

v1.5.0 (01/21/2024)

  • Clean code
  • Add new option speed: change speed when drag to scroll

Add Comment