Native JavaScript implements scroll bars

Nothing to find, obviously Overflow:scroll|auto can, just difficult to watch (in fact, CSS can also set). Only practice writing drag, listen to events, position detection.

The principle is to listen to the sliding bar, press the mouse button, monitor the mouse movement, and then according to the percentage of sliding bars moving to calculate the scrolling extent of the scroll area, with marginleft to scroll. Specifically written in the comments.

The whole becomes an object that prevents all sorts of messy data from polluting global variables. In addition, the function called inside the object is also written to the object constructor, due to the principle of the scope chain of the object, the outside can not be called, to prevent careless calls outside.

1<! DOCTYPE html>234<title>blank Page forRich Text editing</title>5<meta http-equiv= "Content-type" name= "author" content= "Fujihara No Kokukiyo"/>6<meta charset= "Utf-8"/>78<style rel= "stylesheet" type= "Text/css" >9. outer{width:500px;border:1px Solid black;overflow:hidden;margin:50px 0 0100px;}Ten. test_div{width:1200px;background-image:linear-gradient (90deg,lightcoral 0%,lightgreen 50%,lightblue 100%); height:150px;} One. slider_bar,.slider_block{border-radius:5px;} A. slider_bar{position:relative;width:80%;margin:5px Auto 5px auto;background-color:lightgreen;height:5px;} -. slider_block{width:20px;height:5px;background-Color:grey;cursor:pointer;position:absolute;} -</style> the<script type= "Text/javascript" > -Window.onload=function(){ -         /** - * Sliding Bar object constructor, + * Contains other functional functions, using the function of the scope chain principle, to prevent their own arbitrary call - * Compatible: Firefox, opera, Chrome + * IE did not try, but obviously incompatible with the old version ie (8 and before), because the old version of IE added event listener function different methods. If you want to be compatible with IE, you also need to add other functions A * JS generated slider class named Slider_bar, sliding block type is slider_block, you can use CSS style to set their own size, color and so on.  at * Slider left and right padding not limit the sliding bar limit, if need limit, must be in the calculation part of minor modification, add calculate padding, omitted here.  -          * - * @param {domelement} slider_content the element being scrolled (not the parent element of the scrolled element) -          */ -         functionSlider (slider_content) { -             //Slider_instance is the object itself (accessed in the event handler, and the this object in the event handler has been injected as event.currenttarget, so it is pre-stored) in             varSlider_instance= This; -             //this.slider_content for scrolled elements to              This. slider_content=slider_content; +             //This.outer is the parent element of the scrolled element -              This. outer=Slider_content.parentnode; the             //Create a slider bar *              This. slider_bar=Createsliderbar (); $             //Creating sliding barsPanax Notoginseng              This. slider_block=Createsliderblock (); -             //assembling the              This. Slider_bar.appendchild ( This. Slider_block); +              This. Outer.appendchild ( This. Slider_bar); A             //the total width by which scrolling elements can be scrolled the              This. slider_content_width= This. slider_content.offsetwidth- This. outer.clientwidth; +             //total width of sliding bars to slide -              This. slider_bar_width= This. slider_bar.clientwidth- This. slider_block.offsetwidth; $             //the left margin of the scrolled element (relative to the parent element) $              This. slider_content_left=0; -             //left margin of the scroll block (relative to parent element) -              This. slider_block_left=0; the             //left margin of slide bar (relative viewport) -              This. Slider_bar_pageleft=getpageleft ( This. Slider_bar);Wuyi             //Sliding Ribbon Add mouse Press key event the              This. Slider_block.addeventlistener ("MouseDown", Mousedownhandler,false); -             //Cancel Mouse Move event after leaving parent element Wu              This. Outer.addeventlistener ("MouseLeave", Mouseuphandler,false); -             //Cancel Mouse Move event when mouse bouncing key About              This. Outer.addeventlistener ("MouseUp", Mouseuphandler,false); $             /** - * Create slider bar -              */ -             functionCreatesliderbar () { A                 varSlider_bar=document.createelement ("div"); +Slider_bar.classname= "Slider_bar"; the                 returnSlider_bar; -             } $             /** the * Create sliding bars the              */ the             functionCreatesliderblock () { the                 varSlider_block=document.createelement ("div"); -Slider_block.classname= "Slider_block"; in                 returnSlider_block the             } the             /** About * Mouse down event handling the              */ the             functionMousedownhandler (event) { the                 //calculates the left margin of the mouse relative slider and then uses it in the mouse movement event handler +                 //Mouse relative slider left margin = mouse relative viewport left margin-slide block relative viewport left margin -Slider_instance.mouseleft=event.clientx-getpageleft ( This); theConsole.log (Getpageleft ( This));BayiSlider_instance.outer.addEventListener ("MouseMove", Mousemovehandler,false); the             } the             /** - * Mouse Movement event handling -              */ the             functionMousemovehandler (event) { the                 //calculates the left margin of the slider that should be set (relative to the parent container) the                 //Slider relative to the left margin of the slider = mouse relative to the left margin of the viewport-the slider is relative to the left margin of the viewport-the mouse is relative to the left margin of the slider the                 varblockleft=event.clientx-slider_instance.slider_bar_pageleft-Slider_instance.mouseleft; -                 //If the slide block is greater than the parent container, the left margin is larger than the slider's movable width or less than 0, indicating the bounds; set to left and right boundary values the                 if(blockleft>slider_instance.slider_bar_width) { theblockleft=Slider_instance.slider_bar_width the}Else if(blockleft<0){94Blockleft=0; the                 } the                 //set the new position of the slider theslider_instance.slider_block.style.left=blockleft+ "px";98                 //sets the MarginLeft (negative value) of the scrolled element to scroll, as a percentage of the scroll block has scrolled About                 //the left margin=-of the scrolled element (the slider is relative to the left margin of the slider/sliding maximum width * The maximum width of the scrollable element) -Slider_instance.slider_content.style.marginleft= "-" + (Blockleft/slider_instance.slider_bar_width*slider_ Instance.slider_content_width) + "px";101             }102             /**103 * mouse button bounce event handling104              */ the             functionMouseuphandler (event) {106Slider_instance.outer.removeEventListener ("MouseMove", Mousemovehandler,false);107             }108             /**109 * Gets the viewport left margin of the element the              */111             functionGetpageleft (EL) { the                 varresult=El.offsetleft;113                 varParent=el.offsetparent; the                  while(parent!==NULL){ theresult+=Parent.offsetleft; theParent=parent.offsetparent;117                 }118                 returnresult;119             } -         }121         //Show with the Test_div element122         NewSlider (Document.getelementsbyclassname ("Test_div") [0]);123 124     } the</script>126<body>127<div class= "outer" > -<div class= "Test_div" ></div>129</div> the</body>131
Native JavaScript implements scroll bars