Vue directive for a custom scrollbar
A custom scrollbar library that only enhances scrolling instead of reimplementing it with custom scroll behavior. Vuebar uses native scroll events to detect and synchronize scrollbar position. This makes possible to hack into the native events of scrolling element without hassle.
See it in production on GGather.com.
- Directive instead of a custom component, which saves a lot of headaches.
- Native scroll events, no jankiness, no hijacking.
- Simple to use, lightweight & performant.
- Works in the browser and also build (webpack, etc.) environments.
- Compatible with all major browsers including IE9 and above.
- Useful customization options.
- No 3rd party dependencies.
- Tested in production.
To start working with vuebar head to the Installation page
You can use yarn
yarn add vuebar
Import in your project
import Vuebar from 'vuebar' Vue.use(Vuebar)
Every Vuebar scrollable content needs to be wrapped in parent element el1 that hides the native browser scrollbar of the second parent element el2 and it also contains the custom scrollbar element (referenced further as
dragger) which gets appended automatically on the Vuebar initialization.
Below is some markup without any options, there are some customization options & styling available here.
<div class="el1" v-bar> <!-- your scrollable content --> <div class="el2"> <div> ... </div> <!-- other content --> </div> </div>