Native js implements custom scroll bars

This article example for everyone to share js implementation of custom scroll bar specific code, for your reference, the specific content is as follows

1. HTML file

div1 is a scroll bar, div2 is a scroll ball, div3 is a text area container, and div4 is a text area.

<div id="div">
 <div id="div1">
 <div id="div2"> </div>
 </div>
 <div id="div3">
 <div id="div4">
 <p>CSS3  Tutorials </p>
 <p>CSS3  Tutorials </p>
 <p>CSS3  Brief introduction </p>
 <p>CSS3  Border </p>
 <p>CSS3  Fillet </p>
 <p>CSS3  Background </p>
 <p>CSS3  Gradual change </p>
 <p>CSS3  Text effect </p>
 <p>CSS3  Font </p>
 <p>CSS3 2D  Conversion </p>
 <p>CSS3 3D  Conversion </p>
 <p>CSS3  Transition </p>
 <p>CSS3  Animation </p>
 <p>CSS3  Multiple columns </p>
 <p>CSS3  User interface </p>
 <p>CSS3  Picture </p>
 <p>CSS3  Button </p>
 <p>CSS3  Paging </p>
 <p>CSS3  Box size </p>
 <p>CSS3  Elastic box </p>
 <p>CSS3  Multimedia query </p>
 <p>CSS3  Multimedia query example </p>
 </div>
 </div>
</div>

2. css style file

Through container overflow hiding, the text area is absolutely located, and then handed over to js for processing.

*{padding: 0; margin: 0;}
#div{top:200px;left:25%;width: 50%;height: 300px; position: absolute; 
}
#div1{width: 20px; height: 300px; position: relative; 
background: #CCCCCC; border-radius: 28px; float: right; cursor: pointer;}
#div1 #div2{left: -4px;width: 28px;height: 28px;border-radius: 50%; background: red;
position: absolute;}

#div3{width: 90%; height: 300px; border: 2px solid #CCCCCC;
position: relative; float: left; overflow: hidden;}
#div3 #div4{top:0;left:0;width: 100%; position: absolute; font-family: " Microsoft Yahei ";
font-size: 19px; letter-spacing: 1px; padding: 3px 6px;}

3. js script code

window.onload =function(){
 var allDiv =document.getElementById('div');
 var oDiv =document.getElementById('div2');
 var aDiv =document.getElementById('div1');
 var textDiv1 =document.getElementById('div3');
 var textDiv2 =document.getElementById('div4');
 
 //  Drag the progress bar, and the content follows the motion event 
 oDiv.onmousedown =function(ev){
 var oEvent =ev||event;
 
 var disY =oEvent.clientY -oDiv.offsetTop;
 
 if(oDiv.setCapture){
 oDiv.onmousemove =mouseMove;
 oDiv.onmouseup =mouseUp;
 
 oDiv.setCapture();
 }else{
 document.onmousemove =mouseMove;
 document.onmouseup =mouseUp;
 }
 
 function mouseMove(ev){
 var oEvent =ev||event; 
 var t =oEvent.clientY -disY; 
 var bottomLine = aDiv.offsetHeight-oDiv.offsetHeight; 
 
 
 if(t <0){
 t =0;
 }else if(t >bottomLine){
 t =bottomLine;
 }
 
  var percent =t/272;
  
 oDiv.style.top =t+'px';
 textDiv2.style.top =-(textDiv2.offsetHeight-textDiv1.offsetHeight)*percent+'px';
 
 };
 
 function mouseUp(){
 this.onmousemove =null;
 this.onmouseup =null;
 
 if(oDiv.releaseCapture){
 oDiv.releaseCapture();
 }
 };
 
 return false;
 };
 
 //  Click on the progress bar, start the timer, the ball to do uniform movement arrived, clear timer 
 aDiv.onmousedown=function(ev){
 var oEvent =ev||event; 
 var divY =oEvent.clientY-allDiv.offsetTop;
 var timer =null;var speed=10;
 
 
 clearInterval(timer)
 timer = setInterval(function(){
 var percent=oDiv.offsetTop/272;
 
 
 if(oDiv.offsetTop<divY-28){
 oDiv.style.top =oDiv.offsetTop + speed +'px';
 textDiv2.style.top =-(textDiv2.offsetHeight-textDiv1.offsetHeight)*percent +'px';
 }else if(oDiv.offsetTop>divY){
 oDiv.style.top =oDiv.offsetTop - speed +'px';
 textDiv2.style.top =-(textDiv2.offsetHeight-textDiv1.offsetHeight)*percent +'px';
 }else if(oDiv.offsetTop>260){
 oDiv.offsetTop = 272+'px';
 clearInterval(timer);
 }else if(oDiv.offsetTop<10){
 oDiv.offsetTop = 0+'px';
 clearInterval(timer);
 }else{
 clearInterval(timer);
 }
 
 
 },10);
 
 }
 
}