vue-scrolly
v0.9.3
Published
Overlay scrollbar for Vue.js.
Downloads
849
Maintainers
Readme
vue-scrolly
Overlay scrollbar for Vue.js.
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.