vue-agile-scrollbar

2.0.2 • Public • Published

vue-agile-scrollbar

基于vue的自定义滚动条组件,完全基于浏览器的原生滚动,拥有原生滚动体验,又能自定义滚动条样式,简单而强大

Demo

查看demo

Simple usage

通过npm 或者 yarn安装

yarn add vue-agile-scrollbar

npm i vue-agile-scrollbar

引入

import 'vue-agile-scrollbar/dist/style.css'
import vueAgileScrollbar from 'vue-agile-scrollbar'
<template>
  <div style="height:200px;width:500px;border:solid #eee 1px">
    <vueAgileScrollbar>
      <div style="width:10000px; height:100000px"></div>
    </vueAgileScrollbar>
  </div>
</template>

<script>
import vueAgileScrollbar from 'vue-agile-scrollbar'
import 'vue-agile-scrollbar/dist/style.css'

export default {
  components: { vueAgileScrollbar },
  data () {
    return {
      
    }
  }
}
</script>

Api

scroll props

name 类型 默认值 说明
minBarSize Number 50 滚动条最小尺寸,
Y轴滚动条的高度或X轴滚动条的宽度不会小于这个值
scrollTop Number 0 指定滚动条滚到距离顶部某个位置
scrollLeft Number 0 指定滚动条滚到距离左边某个位置
offsetLeft Number 0 滚动距离左边的偏移量
offsetRight Number 10 滚动距离右边的偏移量
offsetTop Number 0 滚动距离顶部的偏移量
offsetBottom Number 10 滚动距离底部的偏移量
isAutoUpdate Boolean true element改变后,是否自动更新
dragSpeedX Number 1 拖拽X滚动条滚动阀值,
值越大滚动越快,越小滚动越慢
dragSpeedY Number 1 拖拽Y滚动条滚动阀值,
值越大滚动越快,越小滚动越慢
displayType String hover 滚动条显示类型
show: 一直显示
hover:鼠标移入显示
hide:一直不显示

event

name 回调参数 说明
scroll function(scrollValue: Object, $event) 滚动会触发该事件
scroll-hit function(type: String, scrollValue: Object) 滚动条触底、触顶、触左、触右后出发该事件
updated function(scrollValue: Object) 容器更新后会触发该事件

方法

name 参数 说明
updated() - element改变后,
可以通过该方法手动更新滚动容器状态
setScrollLeft(number) - 改变滚动条左边滚动距离
setScrollTop(number) - 改变滚动条上边滚动距离

Readme

Keywords

none

Package Sidebar

Install

npm i vue-agile-scrollbar

Weekly Downloads

4

Version

2.0.2

License

MIT

Unpacked Size

21.9 kB

Total Files

6

Last publish

Collaborators

  • huangriya
  • analysysmodule