原生JS实现自定义滚动条效果

本文实例为大家分享了JS实现自定义滚动条的具体代码，供大家参考，具体内容如下

实现思路：

1.外层设置一个div,在外层的div里面设置一个特别高的div(高度为外层5个div的高度)，在高的div里面设置5个div，每个div的高度，都和父级的高度相同
2.在外层div的右侧边框以里自定义一个滚动条，（本人用div设置样式作为滚动条）
3.最外层的div添加onmousewheel事件，使用e.wheelDelta来获取每次滑动的距离，若为正数则向上滑动，将每次增加的数，赋给滚动条的top值，若为负数则向下互动，将每次减少的值，赋值给滚动条的top值，并对特别高的div作对应的上下平移处理
4.注意：滚动条的高度需要和高的div的高度成比例滑动

 
 
  
   
   
   
   *{ 
    padding: 0; 
    margin: 0; 
   } 
   #wrap{ 
    height: 500px; 
    width: 300px; 
    position: relative; 
     
    overflow: hidden; 
    margin: 200px auto 0; 
    border: 3px solid black; 
   } 
   #content{ 
    width: 300px; 
     
    position: absolute; 
    left: 0; 
    top: 0; 
    border: 1px solid red; 
   } 
   #content > div{ 
    width: 294px; 
     
    vertical-align: top; 
    height: 500px; 
    border: 1px solid red; 
    text-align: center; 
    font-size: 100px; 
    line-height: 500px; 
   } 
   #sliderWrap{ 
    height:100% ; 
    width:16px ; 
    background-color: greenyellow; 
    position: absolute; 
    right: 0; 
    top: 0; 
   } 
   #slider{ 
    width: 10px; 
    height: 50px; 
    background-color: blue; 
    position: absolute; 
    left: 3px; 
    top: 0px; 
    border-radius: 10px; 
   } 
   
  
  
   
    
    1 
    2 
    3 
    4 
    5 
    
    
    
     
      
     
    
   
  
  
 

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持考高分网。