Vue-coe-scrollbar NPM

Competitive Diferentials

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