vue如何实现自定义滚动条

Posted 2021-11-22 fengshaopu

1.下载插件

npm install vue-happy-scroll --save-dev

2.导入

import { HappyScroll } from 'vue-happy-scroll'
import 'vue-happy-scroll/docs/happy-scroll.css'

3.注册

components: {
      'happy-scroll': HappyScroll
  },

4.使用即可

<div class="offLineTable" style="width: 300px; height: 500px;">
    <happy-scroll color="rgba(6,6,13,0.3)" size="10" resize>
      <div class="cont">
       			//  你的dom结构，我这里放的是table
      </div>
    </happy-scroll>
</div>

我的示例中，没有很多属性，只是用了：
color：滚动条颜色
size：滚动条粗细
resize：就是字面意思

官方介绍中有诸多属性：
min-length-h ：当元素无限长或者宽的时候，会导致滚动条无限小，这种情况可以使用该属性。来设置最小的长度。
min-length-v：同上
scroll-top：在组件mounted之后，设置容器距离顶部的距离。
scroll-left：在组件mounted之后，设置容器距离左部的距离。
hide-vertical：隐藏竖向滚动条
hide-horizontal：隐藏横向滚动条
resize：如果你的容器大小是变化的(高度或者宽度可能随时发生变化的情况)，可使用resize来开启对容器大小变化的监听，当容器的宽高大于你设定的宽高时，会自动出现滚动条，反正会自动隐藏滚动条。此功能当前版本依赖 element-resize-detector，目前正在寻找性能更高的办法，当然此插件的性能还是可以肯定的
left：表示设置竖向滚动条依靠在左边。默认竖向滚动条在右边。
top： 表示设置横向滚动条依靠在上边。默认横向滚动条在下边

还有一些事件：
horizontal-start：参数：scrollLeft。说明 监听横向滚动条滚动到头部的事件。当scroll-left = 0时会触发该事件。（在horizontal-start事件下，scrollLeft始终为0）
horizontal-end：参数：scrollLeft。说明 监听横向滚动条滚动到尾部的事件。
vertical-start：参数：scrollTop。说明 监听竖向滚动条滚动到头部的事件。当scroll-top = 0时会触发该事件。（在vertical-start事件下，scrollTop始终为0）
vertical-end：参数：scrollTop。说明 监听竖向滚动条滚动到尾部的事件。