用原生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 行，但写起来细节还是挺多的。