0.1.2 • Published 6 years ago
vs-scroll v0.1.2
vs-scroll
Set up
npm install vs-scroll --saveUsage
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
Copyright (c) 2019-present, vs-scroll