Javascript scroll bar

Javascript scroll bar

The implementation principle of the scroll bar has a lot to do with the drag in the previous article. The slide bar is implemented by dragging and calculating the drag range of the slide bar to get a proportional scale, this is the rolling distance of the text we will use,

Do not forget to add text in div3

The Code is as follows:

 New Web Project<script>window.onload=function(){var oParent=document.getElementById('parent');var oDiv1=document.getElementById('div1');var oDiv2=document.getElementById('div2');var oDiv3=document.getElementById('div3');oDiv1.onmousedown=function(evt){var e=evt||event;var disX=e.clientX-oDiv1.offsetLeft;document.onmousemove=function(evt1){var e1=evt1||event;var posX=e1.clientX-disX;if(posX<0){posX=0;}else if(posX>oParent.offsetWidth-oDiv1.offsetWidth){posX=oParent.offsetWidth-oDiv1.offsetWidth;}oDiv1.style.left=posX+'px';var scale=posX/(oParent.offsetWidth-oDiv1.offsetWidth);oDiv3.style.top=-(oDiv3.offsetHeight-oDiv2.offsetHeight)*scale+'px';};document.onmouseup=function(){document.onmousemove=null;document.onmouseup=null;};return false;};};</script>

Running result diagram: