js滚轮事件 js自定义滚动条的实现

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

描述：

自定义滚动条的实现

效果：

实现：

 

 
 
 
  * {margin: 0;padding: 0;}
  html,body { width: 100%;height: 100%;}
  #box { width: 100%; height: 100%; overflow: hidden;}
  
  .ball {
   width: 100%;
   height: 500px;
   font-size:100px;
   font-weight:bold;
   color: skyblue;
   text-align: center;
   line-height:500px;
  }
 
  
  #scroll {
   width: 20px; height: 96%;
   position: fixed; top: 2%; right: 5px;
   border-radius: 10px; background-color: rgba(235, 233, 233, 0.5);
   z-index: 9998; opacity: 0;
  }
 
  
  #scrollBar {
   position: absolute; z-index: 1;
   width: 20px; height: 40px;
   border-radius: 10px;
   left: 0; top: 0; background-color: red;opacity: 0.6;
  }
 

 


 
  
  
1
  
2
  
3
  
4
  
5
  
6
 


 


 

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