Mouse Control scroll bar

<div id= ' out ' style= ' Width:500px;height:500px;overflow:auto ' >          <div id= ' inside ' style= ' width:1000px; Height:1000px;background-color:gray;overflow:auto ' >          </div>      

　　

var outdiv = document.getElementById (' out ');          Outdiv.onwheel = function (event) {              //disables the event default behavior (here the mouse wheel behavior is not associated to the "screen scroll bar moves up or down" behavior)              Event.preventdefault ();              Set the move step of the screen scroll bar when the mouse wheel scrolls              var step =;              if (Event.deltay < 0) {                  //scroll up the mouse wheel, the screen scroll bar moves left                  this.scrollleft-= step;              } else {                  //Scroll down the mouse wheel, the screen scroll bar moves right                  This.scrollleft + = step;              }          }        /**            //If you want to manually set the position of the scroll bar in the y-axis direction, you can set the scrolltop directly, for example:            outdiv.scrolltop = x;            If you want to manually set the position of the scroll bar in the x, Y axis direction you can use the function scrollTo, for example set the x-axis scrolling 100,y axis scroll:            outdiv.scrollto (100,400);        **/

　　

Mouse Control scroll bar