Home
Scroll
Vue.js Drag To Scroll Component – vue-dragscroll

Vue.js Drag To Scroll Component – vue-dragscroll

donmbelembe Added 3 years ago
Live Demo Download Source Code

Install & Download:

$ npm install vue-dragscroll

Description:

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);
app.use(VueDragscroll);
app.mount('#app')
// locally
import { dragscroll } from 'vue-dragscroll'
export default {
  directives: {
    dragscroll
  }
}

2. Basic usage.

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

3. Disable the draggable functionality on children.

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

4. Enable only horizontal or vertical scrolling.

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

Preview:

vue-dragscroll

Changelog:

v4.0.4 (08/23/2022)

  • Bugfix

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

Add Comment