web自定义滚动条

web自定义滚动条

 

      web中有系统自带的滚动条，系统自带的滚动条颜色单一，

      不美观。自定义滚动条可根据不同的业务场景制作不同的样式。

      实现效果：

     实现思路：

     一、布局

        (1)将整个滑动区块用box div包裹  ，内容content和scroll，

        scroll包裹bar 。bar觉得定位于scroll

     二、JS

        (1).点击滑块bar时，获取滑块相对上级父元素的高度，滑块滑块移动时，获取

         移动时的坐标位置，计算y轴偏移量。变换滑块bar的top值。根据比例相应的

         变换右侧content的marginTop高度.

     布局图：

<