scroll component for Vue2.0
npm install vue-happy-scrollvue happy scroll
===
!欢迎PR
| Chrome | Firefox | Safari | Edge | IE |
| :----: | :-----: | :----: | :--: | :----------------------------: |
| √ | √ | √ | √ | 9 √10 √11 √ |
> 当前版本不支持移动端(还未在移动端进行过测试)。The current version not support SP(I haven't tested it on the smartphone yet).
https://tangdaohai.github.io/vue-happy-scroll/
vue-happy-scroll是一款基于vue2.0的滚动条插件。
此插件致力解决原生滚动条在不同系统、不同浏览器中的丑陋表现,在保证原生滚动条功能可用的基础上实现了更丰富的功能、保证在所支持的浏览器下展现出风格一致、交互体验一致的滚动条。
它可以让你无需关心滚动条的兼容性问题,无需关心内容区域的宽高,当设定resize属性后,可以根据内容大小自动显示或隐藏滚动条。
这里有对各种丰富的额外功能进行说明。
https://github.com/tangdaohai/vue-happy-scroll/projects/1
1. npm
推荐使用npm,这样可以跟随你的webpack配置去选择怎样打包。
```
npm i -D vue-happy-scroll
2. CDN
当前是使用的https://unpkg.com托管CDN,unpkg会自动与npm中版本保持同步。
通过以下方式引入即可:
`html`
> 可以访问https://unpkg.com/vue-happy-scroll/ 来选择不同版本
1. 全局注册
`vue`
2. 局部注册
`vue`
3. 当vue是全局变量时
`javascript`
//如果vue是全局变量,happyScroll自动全局安装。
if (typeof window !== 'undefined' && window.Vue) {
Vue.component('happy-scroll', HappyScroll)
}
`html`
* 类型String
* 默认值rgba(51,51,51,0.2)
* 用法:
`html`
设置滚动条的颜色
> 建议使用rgba,这样可以为滚动条设置透明度,当然,如果你需要设置透明度的话。
* 类型Number|String
* 默认值4
* 用法:
`html`
设置滚动条的大小。
> 对于竖向滚动条表示宽度,横向滚动条表示高度
* 类型Number
* 默认值40
* 单位px
* 用法
`html`
设置 横向滚动条最小的长度,当元素无限长或者宽的时候,会导致滚动条无限小,这种情况可以使用该属性。来设置最小的长度。
`html`
也可以设置百分比来限制最小长度(可视区域 * min-length-h)。假设可视区域的宽度为300px,那么滚动条为60px。
当min-length-h小于1的时候,会将其当作百分比来处理。
* 类型NUmber
* 默认值40
* 单位px
* 用法
`html`
设置 竖向滚动条最小的长度,当元素无限长或者宽的时候,会导致滚动条无限小,这种情况可以使用该属性。来设置最小的长度。
`html`
也可以设置百分比来限制最小长度(可视区域 * min-length-v)。假设可视区域的高度为200px,那么滚动条为40px。
当min-length-h小于1的时候,会将其当作百分比来处理。
* 类型Number|String
* 默认值0
* 修饰符sync
* 用法:
`html`
在组件mounted之后,设置容器距离顶部的距离。
> 相当于element.scrollTop 一致。
scroll-top的值会自动转换为数字,所以当值为固定的数字时(使用+转换的),你无需增加:(v-bind),直接写为scroll-top="20"即可。
* 类型Number|String
* 默认值0
* 修饰符sync
* 用法:
`html`
在组件mounted之后,设置容器距离左边的距离。
> 相当于element.scrollLeft 一致。
* 类型 Boolean
* 默认值 false
* 用法:
`html`
隐藏竖向滚动条
- 类型 Boolean
- 默认值 false
- 用法:
`html`
隐藏横向滚动条
>如果你不需要横向出现滚动条,可以设置hide-horizontal来提高性能。
* 类型Boolean
* 默认值false
* 用法:
`html`
如果你的容器大小是变化的(高度或者宽度可能随时发生变化的情况),可使用resize来开启对容器大小变化的监听,当容器的宽高大于你设定的宽高时,会自动出现滚动条,反正会自动隐藏滚动条。
> 此功能当前版本依赖 element-resize-detector,目前正在寻找性能更高的办法,当然此插件的性能还是可以肯定的
* 类型String
* 默认值''
* 可选值:
1. startend
2. 1、2
3. 除的值之外,其他所有值都认为是默认值
* 用法:
`html`
> 当resize=true时,此配置才有效。
该属性表示当容器变小时,滚动条移动的方向。
* smaller-move-h 内容变小时,横向滚动条移动的方向竖向
* smaller-move-v 内容变小时,滚动条移动的方向
当设置为start时,表示变小之后,滚动条会移动到头部(对竖向滚动条来说是最上边,对横向滚动条来说是最左边)
当设置为end时,表示变小之后,滚动条会移动到尾部(对竖向滚动条来说是最下边,对横向滚动条来说是最右边)
当设置为''(默认值)时,表示在变小时,滚动条的位置不发生变化。
* 类型String
* 默认值''
* 可选值:
1. startend
2. 1、2
3. 除的值之外,其他所有值都认为是默认值
* 用法:
`html`
> 当resize=true时,此配置才有效。
该属性表示当容器大小变大时,滚动条移动的方向。
属性值与smaller-move-h原理一致。
* 类型Boolean
* 默认值false
* 用法:
`html`
竖向
表示设置滚动条依靠在左边。默认竖向滚动条在右边。
* 类型Boolean
* 默认值false
* 用法:
`html`
横向
表示设置滚动条依靠在上边。默认横向滚动条在下边。v$3
* 类型Number
* 默认值14
* 单位毫秒
* 说明:
设置鼠标拖动滚动条的节流时间,如果没有特殊的要求不建议修改此值。
* 参数scrollLeft
> 在horizontal-start事件下,scrollLeft始终为0。
* 说明
监听横向滚动条滚动到头部的事件。当scroll-left = 0时会触发该事件。
`html`
* 参数scrollLeft
* 说明
监听横向滚动条滚动到尾部的事件。
`html`
* 参数scrollTop
> 在vertical-start事件下,scrollTop始终为0
* 说明
监听竖向滚动条滚动到头部的事件。当scroll-top = 0时会触发该事件。
`html`
* 参数scrollTop
* 说明
监听竖向滚动条滚动到尾部的事件。
`html`
目录下的源码即可,无需提交build`之后的代码Copyright (c) 2017-present, 唐道海