Native JS Analog scroll bar

The basic interaction of the scrollbar is two, with the mouse dragging the scroll bar and the scroll wheel.

The scrollbar involves a DOM element: 1, the body area (the parent element of Obj,box2 and BOX4), the trigger body of the mouse scroll, the content and scroll bar, and the width-height customization. 2, scroll bar (box1), wide self-setting, high by the content area ratio calculation. 3, scrolling area (box2,box1 parent node), high and content visible area of the same height, wide custom. 4, Content (BOX3, scrolling content body). 5. Content (parent element of BOX4,BOX3, limited width height, content visible area).

The basic principle of the implementation of the above element is absolute positioning, through the mouse interaction events, to complete the relevant DOM top value, has reached the purpose of simulating the scroll bar.

Function scrollbar (obj,box1,box2,box3,box4) { var obox=document.getelementbyid (obj);var  Obar=document.getelementbyid (Box1); Var oright=document.getelementbyid (box2); var ocon= document.getElementById (BOX3); Var oleft=document.getelementbyid (box4);//Calculate the height of the scroll fast obar.style.height= oleft.offsetheight/ocon.offsetheight*oright.offsetheight+ ' px ';               //Adding a scrolling fast drag event obar.onmousedown=function (EV) {var oevent=ev | |  event;console.log (oevent.clienty); var disy=oevent.clienty-obar.offsettop;document.onmousemove= function (EV) {var oevent=ev | |  event;var t=oevent.clienty-disy;settop (t);} Document.onmouseup=function () {document.onmousemove=null;document.onmouseup=null;obar.releasecapture & & obar.releasecapture ();} Obar.setcapture && obar.setcapture (); return false;} Function settop (t) {t<0 &&  (t=0); T>oright.offsetheight-obar.offsetheight&& (t=oright.offsetheight-obar.offsetheight); oBar.style.top=t+ ' px '; var scale=t/(oright.offsetheight-obar.offsetheight); ocon.style.top=-(ocon.offsetheight-oleft.offsetheight ) *scale+ ' px ';}}

Function Settop is the main interactive function, which is mainly to change the content and the top value of the scroll block according to the parameters passed in, and complete the simulated scrolling.

The above function completes the scrolling drag interaction, the following function completes the scroll wheel

function Addwheel (OBJ,FN) {function fnwheel (EV) {var Oevent=ev | | Event;var bdown=false;if (OEVENT.WHEELDELTA) {if ( oevent.wheeldelta<0) {bdown=true;} Else{bdown=false;}} Else{if (oevent.detail>0) {//ff browser bdown=true;} Else{bdown=false;}} fn && fn (bdown); Oevent.preventdefault && Oevent.preventdefault (); return false;} FF Browser scrolling Event Special if (Window.navigator.userAgent.toLowerCase (). IndexOf (' Firefox ')!=-1) {Obj.addeventlistener (' Dommousescroll ', fnwheel,false);} Else{obj.onmousewheel=fnwheel;}}

Addwheel (Obox,function (bdown) {var t=obar.offsettop;if (bdown) {t+=10;} else{t-=10;} Settop (t);});

The Addwheel function is put into ScrollBar, and the speed of scrolling can be controlled by the parameter T of the callback function.

By calling the ScrollBar function, you can simply perform the function of simulating the scrollbar (vertical).

Native JS Analog scroll bar