web自定义滚动条
web中有系统自带的滚动条,系统自带的滚动条颜色单一,
不美观。自定义滚动条可根据不同的业务场景制作不同的样式。
实现效果:
实现思路:
一、布局
(1)将整个滑动区块用box div包裹 ,内容content和scroll,
scroll包裹bar 。bar觉得定位于scroll
二、JS
(1).点击滑块bar时,获取滑块相对上级父元素的高度,滑块滑块移动时,获取
移动时的坐标位置,计算y轴偏移量。变换滑块bar的top值。根据比例相应的
变换右侧content的marginTop高度.
布局图:
实现代码:
customscrollbar.html: