Vuebar|轻量、性能高、可自定义的Vue.js滚动条指令插件

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，单位是毫秒。

github网址：https://github.com/DominikSerafin/vuebar