web自定义滚动条

 

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

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


      实现效果:


     实现思路:

     一、布局

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

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

     二、JS

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

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

         变换右侧content的marginTop高度.


     布局图:

 


  实现代码:

   customscrollbar.html:


本文转载:CSDN博客