前端 滚动条 的思路

之前思路

之前写的滚动条插件,对滚动条的定义是,有个起始值,一个终点值, 滚动条表达一个在这个起终点之间的一个固定范围大小的区间, 这样就有了好多个参数,写的组件定义的时候要给个起值,终值,滚动条当前的值,滚动条代表的范围 等等一大堆的参数,并且在插件编写的时候滚动条的位子考虑,滚动事件和拖拽事件的处理都比较麻烦

现在思路

前段时间从另一个思路想了这个问题,滚动条为什么一定要代表着区间,为什么不能代表着一个百分比的数值,代表着当前滚动条从最小到最大之间的一个百分比的进度.这样只需要给一个默认的当前表示的百分比值就可以了.回调函数也不需要给我什么区间了,给我一个当前状态的百分比就可以了. 在布局上用calc + 百分比 计算. 完全不用考虑所在容器的大小变化.

布局说明

布局,分为三层,这里表示为 container box roller ,关系如下

<...container>
    <...box>
        <...roller></...roller>
    </...box>
<./..container>

contianer高度可以定义成100%或者自己定义的高度
roller高度需要自己定义滚动条有多高
box的高度 = calc(100% - roller高度)
把roller进行定位,top如果是百分数,就是根据父级计算的.如此roller的top与滚动条表示的百分比数值一模一样
并且这种滚动条在视图变化的时候都会自适应变化.

插件

因为我项目用的是vue, 所以我用vue写了一个组件,大家可以参考:
s-vue-scroll
安装的方法和说明npm上面都有写
欢迎使用