Vue.js Drag To Scroll Component – vue-dragscroll

vue-dragscroll is a micro vue.js 3 directive that enables scrolling via holding the mouse button (“drag and drop” or “click and hold” style).

How to use it:

1. Import and register the vue-dragscroll.

// globally
import { createApp } from 'vue'
import App from './App.vue'
import VueDragscroll from "vue-dragscroll";
const app = createApp(App);
// locally
import { dragscroll } from 'vue-dragscroll'
export default {
  directives: {

2. Basic usage.

<div v-dragscroll>
  ... Scrollable Content Here
<!-- For more control -->
<div v-dragscroll="true">
  ... Scrollable Content Here

3. Disable the draggable functionality on children.

<div v-dragscroll:nochilddrag>
  ... Scrollable Content Here

4. Enable only horizontal or vertical scrolling.

<div v-dragscroll.x>
  ... Scrollable Content Here
<div v-dragscroll.y="true">
  ... Scrollable Content Here




v4.0.2 (07/29/2022)

  • Drop v2 Support
  • Migrate to TS and Vite

v3.0.0 (03/30/2021)

  • Add vue 3 support

v2.1.3 (01/27/2021)

  • update

v2.1.0 (12/12/2020)

  • added scoll container option

Download Details:

Author: donmbelembe

Live Demo:

Download Link:

Official Website:

Install & Download:

$ npm install vue-dragscroll

Add Comment