@howdyjs/scroll NPM

Scroll

Version Size

自定义滚动条插件

特性

通过配置项生成自定义样式的滚动条
支持拖拽滚动
基本不需要更改DOM布局，只需在overflow:scroll的元素上增加该指令即可
移动端中无效，会自动改回默认的滚动
封装了vue指令的形式
使用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
  }
}