Skip to content

Latest commit

 

History

History
89 lines (66 loc) · 3.34 KB

README.md

File metadata and controls

89 lines (66 loc) · 3.34 KB
Raw

vue-scrolly npm tag

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

Property Description Type Default
parentScroll Scroll parent when user has completed scrolling to the beginning or the end of the viewport. Boolean true
passiveScroll When true, mousewheel event is attached as a non-blocking passive listener for improved scrolling performance. Disabling parentScroll will not be possible. See: https://www.chromestatus.com/feature/5745543795965952 Boolean false

ScrollyBar

Property Description Type Default
axis Displays horizontal or vertical scrollbar. String [x, y] y

Events

Event Description Parameters
scrollchange Triggers when user scrolls the viewport scrollLayout: object

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.