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

<template>
  <vue-coe-scrollbar @scroll="scroll">
    <div class="list">
      <div v-for="x in content" :key="x" class="list__item">
        {{ x }}
      </div>
    </div>
  </vue-coe-scroll>
</template>
 
<script>
import VueCoeScrollbar from 'vue-coe-scrollbar'
 
export default {
  components: { VueCoeScrollbar },
 
  data () {
    return {
      content: Array.from(({ length: 12 }), (x, i) => i)
    }
  },
 
  methods: {
    scroll (e) { // ... }
  }
}
</script>

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