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

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