vs-scroll

Set up

npm install vs-scroll --save

Usage

main.js

import Vue from 'vue'
import Scroll from 'vs-scroll'

Vue.use(Scroll)

App.vue

<template>
  <div id="app">
    <Scroll :height="500">
      <ul class="list">
        <li
          v-for="n in listsize"
          :key="n"
          class="list-item"
        >
          {{ `${n} 这是一段文字这是一段文字这是一段文字` }}
        </li>
      </ul>
      <!-- <template #scrollbar="{ x, y }">
        <span :style="{position: 'absolute', top: '5px', right: '5px'}">{{ `${x}, ${y}` }}</span>
      </template> -->
    </Scroll>
  </div>
</template>

<script>
import Scroll from './components/scroll'

export default {
  data () {
    return {
      listsize: 500,
      height: 500
    }
  }
}
</script>

Props

|Property|Desciption|Type|Default| |---|---|---|---| |enabled|Whether to enabled ths Scroll.|Boolean|true| |delta-x|Scroll distance in the x direction.|String | Number|100| |delta-y|Scroll distance in the y direction.|String | Number|100| |width|The width of wrapper, it will be displayed as a percentage when the value less than 100, otherwise it is a pixel.|String | Number|100| |height|The height of wrapper, it will be displayed as a percentage when the value less than 100, otherwise it is a pixel.|String | Number|300| |fade|Whether scrollbar will hide automatically when mouse leave the wrapper.|Boolean|true| |wheel|Using wheel to control scroll.|Boolean|true| |mouse|Using mouse to control scroll.|Boolean|true| |touch|Add touch events on content, generally used for mobile, now only supports single pointer.|Boolean|false| |scrollbar|Use scrollbar, it can be an Object with x and y property to control the scrollbars of x or y direction respectively.|Boolean { Object|{ x: false, y: true }| |regulation|It is an Object with delay, interval, leading and trailing property to throttle and debounce scroll event.|Object|{}|

License

MIT

Copyright (c) 2019-present, vs-scroll