JS make list scrolling (with scroll bar)

function MouseWheel (obj, fn) {var ff = navigator.userAgent.indexOf ("Firefox"); if (ff! =-1) {Obj.addeventlistener (" Dommousescroll ", wheel, False);} Else{obj.onmousewheel = wheel;} Function Wheel (event) {var event = Event | | Window.event;var down = true;//determine if scroll down if (event.preventdefault) {//clear default event even T.preventdefault ();} if (event.detail) {//ffdown = Event.detail < 0;} Else{down = event.wheeldelta > 0;} Fn.apply (Obj,[event, down]); return false;}} function Scrollfn () {var wrap = Document.queryselector (". Panelfather"), var middle = document.queryselector (". panelsons var sliderwrap = document.queryselector ("#sliderWrap"), var slider = document.queryselector ("#slider"), var y = 0;// Set the scroll button height function scrollheight () {var scale =wrap.clientheight/880;var height = sliderwrap.offsetheight * scale; if (Heigh T <) {height = 50;} Slider.style.height = height + "px";} ScrollHeight (); var contmaxheight = 880-wrap.clientheight; var slidermaxheight = sliderwrap.offsetheight-slider.clientheight;//ScrollingFunctions function Move () {if (y <= 0) {//limit scroll range y = 0;} else if (y >= slidermaxheight) {y = slidermaxheight;} var movescale = y/slidermaxheight; Slider.style.top = y + "px"; middle.style.top =-Contmaxheight * movescale + "px";} Scroll button Drag Slider.onmousedown = function (event) {var event = Event | | Window.event;var disy = Event.clienty-slider.offsetto P;document.onmousemove = function (event) {var event = Event | | window.event;y = Event.clienty-disy;move ();} Document.onmouseup = function () {document.onmousemove = null;} return false;} Custom scrolling Distance MouseWheel (wrap, function (event, down) {if (down) {y-= 40;} Else{y + = 40;} Move ();}); /keyboard up/down CONTROL scroll Document.onkeydown = function (event) {var event = Event | | Window.event;switch (event.keycode) {case 38:y-= 5; Break;case 40:y + = 5;break;} Move ();} Click the scroll bar to jump to the appropriate location Sliderwrap.onmousedown = function (event) {var event = Event | | window.event;//calculates the distance to move/* mouse vertical coordinate-outermost element spacing = mouse The distance to move the Y value is the distance of the mouse movement minus half the height of the scroll button, so that the center position of the scroll button height is aligned with the mouse coordinate */y = Event.clienty-wrap.offsettop-slidEr.offsetheight/2;move ();}} SCROLLFN ();

Direct code, easy to understand

JS make list scrolling (with scroll bar)