Scroll

自定义滚动条插件

特性

1. 通过配置项生成自定义样式的滚动条
2. 支持拖拽滚动
3. 基本不需要更改DOM布局，只需在overflow:scroll的元素上增加该指令即可
4. 移动端中无效，会自动改回默认的滚动
5. 封装了vue指令的形式
6. 使用ResizeObserver监听盒子大小变化，已无需手动调用update方法(^2.1.2)

原生使用

import CustomScrollBar from '@howdyjs/scroll'
const scroll = new CustomScrollBar({
  el: '#scroll', // Selector or Dom
  options: {
    // Your Options
    // 参考下方说明
  }
});
scroll.init();

• UMD CDN: https://unpkg.com/@howdyjs/scroll/dist/index.umd.js
• UMD Name: HowdyScroll

Options (Objcet)

|参数|说明|类型|可选值|默认值| |:---|:---|:---|:---|:---| |direction|滚动条方向|String|x/y/all|y| |scrollBarWidth|滚动条宽度（轨道）|Number|-|6| |scrollBarOffsetX|滚动条水平偏移（padding)|Number|-|0| |scrollBarOffsetY|滚动条垂直偏移（padding)|Number|-|0| |scrollBarThumbColor|滚动条滑块颜色|String|-|#aab| |scrollBarThumbBorderRadius|滚动条滑块是否需要圆角|Boolean|-|true| |scrollBarThumbBorderRadius|滚动条轨道颜色|String|-|transparent| |scrollBarThumbHoverColor|滚动条滑块Hover时的颜色（默认不设置）|String|-|-| |enableTrackClickScroll|是否允许点击轨道进行滚动|Boolean|-|true| |scrollSpeed|点击轨道时的滚动速度（滚动效果使用requestAnimationFrame实现，该值表示每帧的位移量，单位PX）|Number|-|20| |dragScroll|是否开启拖拽滚动|Boolean|-|false| |thumbShow|滚动条滑块显示方式，可选一直显示与Hover显示|String|always/hover|always| |observeAutoUpdate|自动更新滚动条，默认开启，若关闭则需要自行在盒子大小改变时手动调用更新方法|Boolean|-|true|

长度属性的单位为px

以Vue指令方式使用

import { ScrollDirective } from '@howdyjs/scroll'
// Vue3全局引入
app.use(ScrollDirective, someGlobalOptions)

// Vue2全局引入(对vue2做了兼容)
Vue.use(ScrollDirective, someGlobalOptions)

// 组件内引入
export default {
  directive: {
    scroll: ScrollDirective
  }
}

指令Arg

1. y(默认), 开启垂直滚动
2. x, 开启水平滚动
3. all, 同时开启垂直、水平滚动

v-scroll:y | v-scroll:x | v-scroll:all

指令Value (Objcet)

参数同上方的配置Options