Vue directive to override the native scrollbar, with OverlayScrollbars.
- Vue directive
- Options support (with reactive support).
- Fancy demo.
-
Download the plugin and OverlayScrollbars (just for the css):
// With npm npm install vue-overlayscrollbars --save-dev // Or yarn yarn add vue-overlayscrollbars
-
Add it to Vue:
import Vue from "vue"; import VueOverlayScrollbars from "vue-overlayscrollbars"; Vue.use(VueOverlayScrollbars);
-
Require the CSS:
// 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";
-
Add the directive
v-scrollbar
to any container in your templates:<div v-scrollbar></div> <ul v-scrollbar></ul> <textarea v-scrollbar></textarea>
-
And voila, you have OverlayScrollbars in Vue, the most easy way.
Just pass it with the directive:
<template>
<div :v-scrollbar="options"></div>
</template>
<script>
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.
}
};
}
};
</script>
The OverlayScrollbar instance will be stored in the same element where you use the directive:
<template>
<div :v-scrollbar="options" ref="element"></div>
</template>
<script>
export default {
data() {
return {
options: {
...
}
};
},
mounted() {
console.info(this.$refs.element._os); // _os attribute in the element it's the OverlayScrollbar instance.
}
};
</script>