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

Install & Download:

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


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)

2. In your app:

  <div v-drag-scroller>

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

  <div v-drag-scroller="options">
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 v-drag-scroller.onlyY>
  y-axis only
<div v-drag-scroller.disablechild>
  disable the scroller in childreen
<div v-drag-scroller.drag-scroller-disable>
  disable the scroller




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