vue-coe-scrollbar
<h1 align="center">vue-coe-scrollbar ✅</h1>
Last updated a year ago by viniazvd .
MIT · Original npm · Tarball · package.json
$ cnpm install vue-coe-scrollbar 
SYNC missed versions from official npm registry.

vue-coe-scrollbar ✅

License


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

Made in: @convenia

Current Tags

  • 0.1.8                                ...           latest (a year ago)

9 Versions

  • 0.1.8                                ...           a year ago
  • 0.1.7                                ...           a year ago
  • 0.1.6                                ...           a year ago
  • 0.1.5                                ...           a year ago
  • 0.1.4                                ...           a year ago
  • 0.1.3                                ...           a year ago
  • 0.1.2                                ...           a year ago
  • 0.1.1                                ...           a year ago
  • 0.1.0                                ...           a year ago
Maintainers (2)
Downloads
Today 0
This Week 0
This Month 0
Last Day 0
Last Week 0
Last Month 0
Dependencies (0)
None
Dev Dependencies (15)
Dependents (0)
None

Copyright 2014 - 2016 © taobao.org |