滚动条插件

HTML结构说明

<div style="position:relative;">
    <div id="box" style="overflow:hidden;height:200px;">
        1111111111<br>
        2222222222<br>
        3333333333<br>
        ......
    </div>
</div>

调用方式

npm install @stl/scroll-bar

css:  @import "/node_modules/@stl/scroll-bar/dist/index.css";
js：  import { scrollBar } from "@stl/scroll-bar"

let scrollBar = new scrollBar({id:"box"});

参数说明

| name | type | default | description | | :----------: | :-------: | :--------: | :------------------------------------------------------------------------------------------: | | id | string | \ | 需要滚动的元素的id**(必填)** | | direction | string | "y" | 滚动条滚动方向 默认为竖向滚动条 可选值："y"(竖向滚动条)，"x"(横向滚动条)，"xy"(横向竖向都添加) | | size | number | 5 | 滚动条的尺寸(竖向滚动条为设置宽度值，横向滚动条为设置高度值) | | smallSize | number | 20 | 滚动条的最小高度/宽度(竖向滚动条为设置高度值，横向滚动条为设置宽度值),避免因内容过多导致滚动条太小 | | wheelDis | number | 40 | 每次滚动鼠标滚轮滚动的距离 | | autoRefresh | boolean | true | 是否自动监听滚动元素内容变化刷新滚动条高度 | | className | string | "" | 滚动条需要添加的类名(添加自定义样式时使用) | | xMousewheel | boolean | true | 横向滚动条是否允许滚动鼠标滚轮滚动 只有在direction值为"x"时此参数才有效 |

方法说明

方法名：      refresh
描述：        刷新滚动条的方法
调用方式：    scrollBar.refresh();

方法名：      fixedPointScroll
描述：        滚动到指定位置
调用方式：    scrollBar.fixedPointScroll(obj);
参数说明：    {left?:number,top?:number}  left:横向滚动条时使用  滚动元素需要滚动到的left值   top:竖向滚动条时使用 滚动元素需要滚动到的top值