vue watch 修改滚动条_GitHub - YD-Feng/vue-bar: vue 模拟滚动条指令拓展

vue-bar

Vue 模拟滚动条 - 自定义指令

原版gitHub：https://github.com/DominikSerafin/vuebar

本版作者：YD-Feng

主要调整：

1.代码注释本土化

2.修复了没生成模拟滚动条时，拖动内容会导致隐藏的原生滚动条显示出来的bug

3.补全水平模拟滚动条功能

使用说明

引入文件

或者通过 require，import 引入(具体引用路径根据你实际存放路径决定)

import './vue-bar.css';

import VueBar from './vue-bar.js';

成功引入后，通过 Vue.use 方法引入指令

import VueBar from './vue-bar.js';

Vue.use(VueBar);

然后在模版元素里就可以使用 v-bar 指令了

v-bar 指令支持传入一个 config 对象

config 对象各个属性的默认值及其说明

config = {

unSelectableBody: true, //当你拖动模拟滚动条的时候，禁止选中 body 标签内的内容

overrideFloatingScrollBar: true, //是否覆盖悬浮滚动条(只有在移动设备上会出现悬浮滚动条)

scrollingPhantomDelay: 1000, //移除拖选样式(滚动条)的延迟时间

draggingPhantomDelay: 1000, //移除拖选样式(滚动条外壳)的延迟时间

preventParentScroll: false, //阻止父级元素滚动

useScrollBarPseudo: false //使用 pseudo 样式选择器来处理原始滚动条隐藏的问题，只有 chrome 和 safari 浏览器支持

}

关于模拟滚动条样式调整

可直接修改 vue-bar.css 文件来实现