vue-scrolly

Overlay scrollbar for Vue.js.

Check out the live demo.

Features

• Supports vertical & horizontal scrollbars.
• Easy scrollbar configration - everything using CSS!
• Uses MutationObserver to update scrollbar size & position.
• Supports min-height (default 20% of viewport) to ensure scrollbar remains draggable on very long content.
• When user has scrolled to the beginning or the end of content, Scrolly seamlessly activates scrolling of parent body by detecting if user scrolled with greater scroll inertia.

Installation

$ npm install vue-scrolly

Using vue-scrolly

First, import vue-scrolly into your Vue component.

import { Scrolly, ScrollyViewport, ScrollyBar } from 'vue-scrolly';  export default {   // ...   components: {     Scrolly,     ScrollyViewport,     ScrollyBar   } }

Then, construct your div block with overlay scrollbar using scrolly component.

<scrolly class="foo" :style="{ width: '400px', height: '300px' }">   <scrolly-viewport>     <!-- Your contents here -->   </scrolly>   <scrolly-bar axis="y"></scrolly-bar>   <scrolly-bar axis="x"></scrolly-bar> </scrolly>

Customizing overlay scrollbar

You can customize the appearance of the overlay scrollbar using CSS overrides.

This simple example below creates custom blue overlay scrollbar:

.scrolly.foo .scrolly-bar:before {     background: blue; }

For complete reference, you can look at vue-scrolly's default CSS stylesheet from the main Scrolly.vue component file.

Options

Scrolly

ScrollyBar

Events

License

vue-scrolly by Yan Sern licensed under the MIT+BSD. This project also uses normalizeWheel packaged by basilfx which contains codes extracted from BSD-licensed Fixed Data Table project by Facebook.

PS: I would love to know if you're using vue-scrolly. Tweet to me at @yansernio.