vue-coe-scrollbar ✅

✨ Example✨

Competitive Diferentials

• keyboard support


• bundle size: 2.2kB


• built with poi and bili


• native style and behavior


• clean and documented code


• compatibility SSR -ty @vinicius73


• state-based, preventing re-paint -ty @vinicius73


• based on transform, property calculated on GPU: ty, @VitorLuizC


• use requestAnimationFrame to improve scrolling animation performance

Install

yarn add vue-coe-scrollbar or npm install vue-coe-scrollbar

Example
``vue



`

Props

Name | type | default | About
----- | ------- | ---------------------------- | ------
active | Boolean | true | Disable scroll if false
wrapperSelector | String | vue-coe-scroll > .wrapper | any changes inside this element will recalculate the scroll
initDelay | Number | 0 | delay to avoid wasted resources when mounting the scroll
jump | Number | 700 | Jump on click
disappear | Number | 1500 | The delay before scrollbar hides
scrollDuration | Number | 300 | The transition time on click/keydown (ms)
speed | Number | 0.1 | The scroll wheel speed ratio
width | Number | 7 | scrollbar width base
color | String | rgba(18, 30, 73, 0.2) | scrollbar color
background | String | transparent` | scrollbar background

Disclaimer: there is a bit more elaborate documentation in the code

Event

Name | About
----- | -----
scroll | Emit event on scroll

Contributors

- https://github.com/Giseudo
- https://github.com/stephaniebang
- https://github.com/guibarscevicius

Made in: @convenia