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



点赞(0) 打赏

立即下载

点击下载

评论列表 共有 0 条评论

暂无评论

微信公众账号

微信扫一扫加关注

发表
评论
返回
顶部