乐趣区

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

    退出移动版