Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/scaccogatto/smooth-vuebar
Vue directive wrapper for smooth-scrollbar
https://github.com/scaccogatto/smooth-vuebar
scrollbar smooth-scrolling vue
Last synced: 10 days ago
JSON representation
Vue directive wrapper for smooth-scrollbar
- Host: GitHub
- URL: https://github.com/scaccogatto/smooth-vuebar
- Owner: scaccogatto
- License: mit
- Created: 2019-06-10T10:36:31.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2022-03-15T19:25:07.000Z (over 2 years ago)
- Last Synced: 2024-11-01T12:35:51.295Z (17 days ago)
- Topics: scrollbar, smooth-scrolling, vue
- Language: JavaScript
- Homepage:
- Size: 11.7 KB
- Stars: 30
- Watchers: 1
- Forks: 1
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# smooth-vuebar
> Vue directive wrapper for [smooth-scrollbar](https://github.com/idiotWu/smooth-scrollbar)
## Demo
You can refer to the [wrapped library's demo](https://idiotwu.github.io/smooth-scrollbar/).
## Why
There are many other wrappers for this library but none of them implements the original library as directive.
I think directives are the right way to handle this kind of DOM manipulation, so let it be.
Also, there are so many problems I found while trying SSR that the only available choice for me was doing it by myself.
## Install
`npm i smooth-vuebar`
```js
Vue.use(SmoothVuebar)
```
**SSR (nuxt)**: install as [client plugin](https://nuxtjs.org/guide/plugins/#client-side-only)
**Safari and IE**: this library requires a `CustomEvent` polyfill.
## Usage
Usually this plugin is used app-wide.
### Vue
```html
```
### Nuxt & Gridsome
this is a default.vue layout:
```html
```
However, you can use it where you want, just mind the default css:
```css
.smooth-vuebar {
max-width: 100vw;
max-height: 100vh;
}
```
And replace it as you wish.
## Options
The directive can be customized passing an object.
```html
```
- `listener` (default: `undefined`) => can be a function, it will automatically set as listener.
- `options` (default: `undefined`) => can be an object.
Please refer to the [offical API docs](https://github.com/idiotWu/smooth-scrollbar/blob/develop/docs/api.md).
## Events
The directive implements two extra events, useful when you want to retrieve the Scrollbar istance and use it.
- `@insert` - fired when the DOM element is inserted and the library is loaded on it. The callback may be a `function (e)`.
- `@unbind` - fired when the DOM element is unbound and the library is unloaded. The callback may be a `function (e)`.
### Extra
You can define global default options. They are valid only if you don't set any local option.
Try it:
```js
Vue.use(SmoothVuebar, {
listener: () => {},
options: {}
})
```
## Play with the core
If you want to use the actual wrapper library, here is an helper, available in every component:
```js
this.$scrollbar
```
Or project-wide
```js
import Vue from 'vue'
Vue.scrollbar
```
Refer to [offical API docs](https://github.com/idiotWu/smooth-scrollbar/blob/develop/docs/api.md).