Vue directive for a custom scrollbar

vuebar

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.

Features

  • 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.

Example

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>

If you would like to explore more about VueBar, head to the project's repository on GitHub, where you will also find the source code. Created and submitted by @SerafinDominik.