用原生TypeScript造轮子（二） 自定义滚动条scrollPanel

ui参考primeNG: http://primefaces.org/primeng...
ts开发环境： https://github.com/lycHub/ts-...
目录

说明

ui参考primeNG
已实现的功能：

• 双向滑动
• 禁止某条边滑动
• 同时支持移动、pc
• 支持自定义事件

其实自定义的滚动条，四个方向都能做，只是多写两个dom而已。
demo和源码

思路

dom部分很简单：一个外层wrap容器包裹内容，在写两个滚动条，只要内容的宽高超过wrap写死的尺寸，就会出现滚动条了：

有三个关键的数字需要计算：

1. 滚动条的width(height)
2. 正文的scrollLeft(scrollTop)
3. 滚动条的偏移量style.left(top)

以横向为例：

1. 横向滚动条的width = (正文可视区clientWidth / 正文真实宽度scrollWidth) * 100 + '%'.

1. 正文的向左滚动的距离(scrollLeft的差值)：
   比例关系： scrollLeft / scrollWidth(正文真实宽度) = deltaX(鼠标滑动的距离) / clientWidth（可视区宽度）
   所以：scrollLeft的差值 = deltaX / clientWidth * scrollWidth

1. 滚动条的偏移量，也就是滚动条应该移动的距离：(scrollLeft / scrollWidth) * 100 + '%'.
   scrollLeft 就是上面算出的差值

   这几个关系弄清后这玩意基本就算做出来了。

需要注意的是，涉及到的事件较多，大概有这么几个：

我把事件函数都保存的实例属性上了，为了更方便的管理this和移除事件监听，总的代码量只有300行，但写起来细节还是挺多的。