项目实训 - Scene-UI - 编写scrollbar

滚动条

滚动条的编写参考了这篇大牛的文章滚动条组件实现 - 掘金 (juejin.cn),在其基础上进行了修改形成了scene-ui的滚动条,关于滚动条的布局可以参考那篇文章。

我添加了对不必要的滚动条不加以显示的功能,原版无论真实大小有没有超过可视大小都会显示出XY轴的滚动条,而我通过props.alwaysNeedY与比较真实高度与可视高度的大小这两个方面控制Y轴滚动条的显示

滚动条的核心在第191行: _thumbY.getBoundingClientRect().top - wrapEl.getBoundingClientRect().top = 拖动滚动条移动的距离,再除以包裹div的高度计算出移动的百分比,乘上未压缩的高度就是需要移动距离。

下面是源代码,有些注释是我的理解:





你可能感兴趣的:(项目实训,ui,vue.js,typescript)