Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/enriquebv/vue-overlayscrollbars
Vue directive to override the native scrollbar, with OverlayScrollbars.
https://github.com/enriquebv/vue-overlayscrollbars
Last synced: 19 days ago
JSON representation
Vue directive to override the native scrollbar, with OverlayScrollbars.
- Host: GitHub
- URL: https://github.com/enriquebv/vue-overlayscrollbars
- Owner: enriquebv
- License: mit
- Created: 2019-09-10T17:09:45.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2023-01-01T11:10:48.000Z (about 2 years ago)
- Last Synced: 2023-02-27T10:33:03.157Z (almost 2 years ago)
- Language: Vue
- Size: 3.58 MB
- Stars: 0
- Watchers: 2
- Forks: 1
- Open Issues: 26
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# vue-overlayscrollbars
Vue directive to override the native scrollbar, with OverlayScrollbars.
### To do
- [x] Vue directive
- [x] Options support (with reactive support).
- [ ] Fancy demo.
## How to use
1. Download the plugin and OverlayScrollbars (just for the css):
```bash
// With npm
npm install vue-overlayscrollbars --save-dev
// Or yarn
yarn add vue-overlayscrollbars
```
2. Add it to Vue:
```js
import Vue from "vue";
import VueOverlayScrollbars from "vue-overlayscrollbars";
Vue.use(VueOverlayScrollbars);
```
3. Require the CSS:
```js
// Using the OverlayScrollbars default (included in plugin).
import "vue-overlayscrollbars/dist/vue-overlayscrollbars.css";
// Or using any download template from https://kingsora.github.io/OverlayScrollbars/#!themes
import "your/downloaded/theme.css";
```
4. Add the directive `v-scrollbar` to any container in your templates:
```html
```
5. And voila, you have OverlayScrollbars in Vue, the most easy way.
## OverlayScrollbars options
Just pass it with the directive:
```html
export default {
data() {
return {
options: {
className: "os-theme-dark",
resize: "none",
sizeAutoCapable: true,
clipAlways: true,
normalizeRTL: true,
paddingAbsolute: false,
autoUpdate: null
// Same options used in Vanilla JavaScript version
// https://kingsora.github.io/OverlayScrollbars/#!documentation/options.
}
};
}
};
```
## Get the instance
The OverlayScrollbar instance will be stored in the same element where you use the directive:
```html
export default {
data() {
return {
options: {
...
}
};
},
mounted() {
console.info(this.$refs.element._os); // _os attribute in the element it's the OverlayScrollbar instance.
}
};
```