Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/huynamboz/vue-drag-scroller
This vue npm package help you drag to scroll easier🌟
https://github.com/huynamboz/vue-drag-scroller
drag dragscroll npm-package vue vue2 vue3
Last synced: 3 days ago
JSON representation
This vue npm package help you drag to scroll easier🌟
- Host: GitHub
- URL: https://github.com/huynamboz/vue-drag-scroller
- Owner: huynamboz
- Created: 2024-01-11T15:30:43.000Z (9 months ago)
- Default Branch: dev
- Last Pushed: 2024-08-08T12:20:36.000Z (about 2 months ago)
- Last Synced: 2024-09-19T13:10:04.480Z (8 days ago)
- Topics: drag, dragscroll, npm-package, vue, vue2, vue3
- Language: Markdown
- Homepage: https://huynamboz.github.io/vue-drag-scroller
- Size: 4 MB
- Stars: 17
- Watchers: 0
- Forks: 0
- Open Issues: 4
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Vue drag scroller ⚡️
[](https://www.npmjs.com/package/vue-drag-scroller)
[](https://www.npmjs.com/package/vue-drag-scroller)
[](https://www.npmjs.com/package/vue-drag-scroller)
This package help you drag to scroll easier🌟
[Docs and demo](https://huynamboz.github.io/vue-drag-scroller/)
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:**
```javascript
//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')
```
``` html
//Example.vue
```
**Register local:**
```javascript
// Example.vue
import { dragScroller as vDragScroller } from "vue-drag-scroller"
```
**Register in Nuxt:**
```javascript
// plugins/vue-drag-scroller.js
import VueDragScroller from 'vue-drag-scroller'
export default defineNuxtPlugin((nuxtApp) => {
nuxtApp.vueApp.use(VueDragScroller)
})
```
```javascript
// nuxt.config.js
export default defineNuxtConfig({
plugins: ['~/plugins/vue-drag-scroller.ts'],
})
```
## Config🔖
### Options:
you can pass options to directive like this:
```javascript
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
});
```
| Name | Description | Type | Default |
|--|--|--|--|
| startScroll | Trigger when start scroll | Function | null |
| endScroll | Trigger when end scroll | Function | null |
| speed | Speed of scroll | Number | 1 |
| hideScrollbar | Hide scrollbar | Boolean | false |
| reverseDirection | Reverse direction of scroll | Boolean | false |
### Binding value:
you can pass binding value to directive like this:
```javascript
```
```javascript
```
| Name | Description | Type | Default |
|--|--|--|--|
| disablechild | Disable drag scroll in all child | Boolean | false |
| onlyX | Only scroll in X axis | Boolean | false |
| onlyY | Only scroll in Y axis | Boolean | false |
Priority: disablechild > drag-scroller-disable > onlyX > onlyY
### Events (use in options):
| Name | Description |
|--|--|
| startScroll | Trigger when start scroll|
| endScroll | Trigger when end scroll|
| onScrolling | Trigger when drag and move mouse|
#### Example
```javascript
const onScroll = (e) => {
console.log("working",e);
};
const onEndScroll = (e) => {
console.log("end scroll",e);
};
const options = {
startScroll: onScroll,
endScroll: onEndScroll,
};
// in component
```
- ### Events Listener with v-on or @
#### Example with @
```javascript
```
#### Example with v-on
```javascript
```
- ### Drag parent except all child
#### Example
```javascript
```
- ### Drag parent except particular child
#### Example
```javascript
// disable drag scroll
```
- ### Only scroll in X axis
#### Example
```javascript
```
- ### Only scroll in Y axis
#### Example
```javascript
```
- ### Hide scrollbar
#### Example
```javascript
```
- ### Change speed of scroll
#### Example
```javascript
```
- ### Change direction of scroll
#### Example
```javascript
```