npm install vue-scrolly
Check out the live demo.
bash
$ npm install vue-scrolly
`Using vue-scrolly
First, import
vue-scrolly into your Vue component.
`js
import { Scrolly, ScrollyViewport, ScrollyBar } from 'vue-scrolly';export default {
// ...
components: {
Scrolly,
ScrollyViewport,
ScrollyBar
}
}
`Then, construct your div block with overlay scrollbar using scrolly component.
`html
`Customizing overlay scrollbar
You can customize the appearance of the overlay scrollbar using CSS overrides.This simple example below creates custom blue overlay scrollbar:
`css
.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.
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 |
| Event | Description | Parameters |
| ----- | ----------- | :---------: |
| scrollchange | Triggers when user scrolls the viewport | scrollLayout: object |
> PS: I would love to know if you're using vue-scrolly. Tweet to me at @yansernio.