Vuebar是一个Vue.js的可定制滚动条插件，具有原生Scoll行为，且轻量、性能高、可自定义且没有依赖性。
Vuebar是一个轻量级、高性能且可自定义的Vue 2指令，用于实现自定义滚动条。使用时需要引入Vuebar并在Vue中注册，然后在需要添加滚动条的元素上添加相应的v-bar属性。
除了基本用法外，Vuebar还支持一些选项，例如preventParentScroll和scrollThrottle。这将禁止父元素滚动并设置滚动的速率。如果您不添加选项，Vuebar将使用默认值。
您可以通过Vue的props属性来自定义Vuebar的外观。例如，您可以更改滚动条的颜色和宽度。此外，Vuebar自动规范化数据，因此您不必担心数据是否在特定范围内。
使用方法
要使用Vuebar，可以使用npm进行安装，也可以通过浏览器直接使用。
安装
在项目中使用npm安装vuebar插件，命令如下：
npm install vuebar --save //cdn https://unpkg.com/vuebar
使用
基本html结构：
<div v-bar> <!-- 外层容器添加 v-bar 指令 -->
<div> <!-- 可滚动内容使用一个div包裹 -->
<!-- 可滚动内容 -->
</div>
<!-- dragger will be automatically added here -->
</div>
带选项的例子：
<div v-bar="{
preventParentScroll: true,
scrollThrottle: 30,
}"> <!-- 外层容器添加 v-bar 指令 -->
<div> <!-- 可滚动内容使用一个div包裹 -->
<!-- 可滚动内容 -->
</div>
<!-- dragger will be automatically added here -->
</div>
滚动条的默认样式如下，你需要手动添加到你的项目中(可以根据实际情况自行修改样式)：
.vb > .vb-dragger {
z-index: 5;
width: 12px;
right: 0;
}
.vb > .vb-dragger > .vb-dragger-styler {
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-transform: rotate3d(0,0,0,0);
transform: rotate3d(0,0,0,0);
-webkit-transition:
background-color 100ms ease-out,
margin 100ms ease-out,
height 100ms ease-out;
transition:
background-color 100ms ease-out,
margin 100ms ease-out,
height 100ms ease-out;
background-color: rgba(48, 121, 244,.1);
margin: 5px 5px 5px 0;
border-radius: 20px;
height: calc(100% - 10px);
display: block;
}
.vb.vb-scrolling-phantom > .vb-dragger > .vb-dragger-styler {
background-color: rgba(48, 121, 244,.3);
}
.vb > .vb-dragger:hover > .vb-dragger-styler {
background-color: rgba(48, 121, 244,.5);
margin: 0px;
height: 100%;
}
.vb.vb-dragging > .vb-dragger > .vb-dragger-styler {
background-color: rgba(48, 121, 244,.5);
margin: 0px;
height: 100%;
}
.vb.vb-dragging-phantom > .vb-dragger > .vb-dragger-styler {
background-color: rgba(48, 121, 244,.5);
}
配置参数
常用配置参数：
- preventParentScroll：当设置为true时，当内容适合容器时，父容器不会滚动。默认值为false。
- unselectableBody：当设置为true时，不允许选择滚动区域中的文本。默认值为true。
- useScrollbarPseudo：当设置为true时，Vuebar将使用CSS伪类来模拟滚动条。默认值为false。
- overrideFloatingScrollbar：当设置为true时，Vuebar将覆盖iOS上的浮动滚动条。
- scrollThrottle：滚动事件处理程序的节流时间（以毫秒为单位）。默认值为10。
- draggerThrottle：拖动事件处理程序的节流时间（以毫秒为单位）。默认值为10。
- observerThrottle：MutationObserver的节流时间（以毫秒为单位），用于检测内容变化。默认值为100。
- resizeRefresh：当设置为true时，窗口大小调整时会刷新Vuebar。默认值为true。
- resizeDebounce：当设置为true时，Vuebar在窗口调整大小时使用时间防抖。默认值为100（毫秒）。
- scrollingPhantomDelay：在开始滚动前，滚动区域中的虚幻部分的显示延迟时间（以毫秒为单位）。默认值为1000。
- draggingPhantomDelay：用于设置在拖拽滚动条时，滚动条拖影（dragging phantom）的延迟时间。滚动条拖影是指当用户拖拽滚动条时，出现的一个虚拟的滚动条影像。draggingPhantomDelay配置项决定了拖影的延迟时间，也就是用户开始拖拽滚动条时，拖影出现的时间间隔。默认值是1000，单位是毫秒。
