1.8.6 • Published 9 months ago

vue-drag-scroller v1.8.6

Weekly downloads
-
License
MIT
Repository
github
Last release
9 months ago

Vue drag scroller ⚡️

image

npm version npm download npm license

This package help you drag to scroll easier🌟

Docs and demo

https://github.com/huynamboz/vue-drag-scroller/assets/38585889/20139bab-0004-4249-8826-70959f6dbc77

How to install🔖

NPM

npm install vue-drag-scroller

YARN

yarn add vue-drag-scroller

Install🔖

Use with vue 3: Register global:

//main.ts
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')
//Example.vue
<template>
	<div v-drag-scroller>
	</div>
</template>

Register local:

// Example.vue
<script>
    import { dragScroller as vDragScroller } from  "vue-drag-scroller"
</script>

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

Register in Nuxt:

// plugins/vue-drag-scroller.js
import VueDragScroller from 'vue-drag-scroller'

export default defineNuxtPlugin((nuxtApp) => {
  nuxtApp.vueApp.use(VueDragScroller)
})
// nuxt.config.js
export default defineNuxtConfig({
  plugins: ['~/plugins/vue-drag-scroller.ts'],
})

Config🔖

Options:

you can pass options to directive like this:

<script setup>
import { ref } from 'vue'
const options = ref({
    startScroll: () => {
        console.log("start scroll");
    },
    endScroll: () => {
        console.log("end scroll");
    },
    speed: 1, // default is 1
    reverseDirection: false, // default is false
    hideScrollbar: false, // default is false
});
</script>

<template>
    <div v-drag-scroller="options">
    </div>
</template>
NameDescriptionTypeDefault
startScrollTrigger when start scrollFunctionnull
endScrollTrigger when end scrollFunctionnull
speedSpeed of scrollNumber1
hideScrollbarHide scrollbarBooleanfalse
reverseDirectionReverse direction of scrollBooleanfalse

Binding value:

you can pass binding value to directive like this:

<template>
    <div v-drag-scroller.onlyX>
    </div>
</template>
<template>
    <div v-drag-scroller.disablechild>
    </div>
</template>
NameDescriptionTypeDefault
disablechildDisable drag scroll in all childBooleanfalse
onlyXOnly scroll in X axisBooleanfalse
onlyYOnly scroll in Y axisBooleanfalse

Priority: disablechild > drag-scroller-disable > onlyX > onlyY

Events (use in options):

NameDescription
startScrollTrigger when start scroll
endScrollTrigger when end scroll
onScrollingTrigger when drag and move mouse

Example

<script setup>
const onScroll = (e) => {
  console.log("working",e);
};

const onEndScroll = (e) => {
  console.log("end scroll",e);
};

const options = {
    startScroll: onScroll,
    endScroll: onEndScroll,
};

</script>

// in component 
<template>
    <div v-drag-scroller="options">
    </div>
</template>
  • Events Listener with v-on or @

Example with @

<template>
    <div v-drag-scroller
      @scrollStart="onScroll"
      @scrollEnd="onEndScroll"
      @scrollMoving="onScrolling"
    >
    </div>
</template>

Example with v-on

<template>
    <div v-drag-scroller
      v-on:scrollStart="onScroll"
      v-on:scrollEnd="onEndScroll"
      v-on:scrollMoving="onScrolling"
    >
    </div>
</template>
  • Drag parent except all child

Example

<template>
    <div v-drag-scroller.disablechild>
        <div class="child">
        </div>
        <div class="child">
        </div>
    </div>
</template>
  • Drag parent except particular child

Example

<template>
    <div v-drag-scroller>
        <div class="child" drag-scroller-disable> // disable drag scroll
        </div>
        <div class="child">
        </div>
    </div>
</template>
  • Only scroll in X axis

Example

<template>
    <div v-drag-scroller.onlyX>
    </div>
</template>
  • Only scroll in Y axis

Example

<template>
    <div v-drag-scroller.onlyY>
    </div>
</template>
  • Hide scrollbar

Example

<template>
    <div v-drag-scroller={
      hideScrollbar: true
    }>
    </div>
</template>
  • Change speed of scroll

Example

<template>
    <div v-drag-scroller={
      speed: 0.5 // default is 1
    }>
    </div>
</template>
  • Change direction of scroll

Example

<template>
    <div v-drag-scroller={
      reverseDirection: true
    }>
    </div>
</template>
1.8.6

9 months ago

1.8.2

12 months ago

1.8.1

1 year ago

1.8.5

11 months ago

1.8.4

11 months ago

1.8.3

12 months ago

1.8.0

1 year ago

1.7.1

1 year ago

1.7.0

1 year ago

1.5.3

1 year ago

1.6.0

1 year ago

1.5.2

1 year ago

1.5.1

1 year ago

1.5.0

1 year ago

1.2.0

2 years ago

1.4.0

2 years ago

1.3.0

2 years ago

1.1.4

2 years ago

1.1.3

2 years ago

1.1.2

2 years ago

1.1.1

2 years ago

1.1.0

2 years ago

1.0.0

2 years ago