js製作列表滾動（有捲軸）

標籤：cas   break   上下   listener   滑鼠移動   key   efault   scroll   垂直   

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; //判斷是否向下滾動if (event.preventDefault){ //清除預設事件event.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;//設定滾動按鈕高度function scrollHeight() {var scale =wrap.clientHeight/880;var height = sliderWrap.offsetHeight * scale; if (height < 50){ height = 50;}slider.style.height = height + "px";}scrollHeight();var contMaxHeight = 880 - wrap.clientHeight; var sliderMaxHeight = sliderWrap.offsetHeight - slider.clientHeight;//滾動函數function move() {if (y <= 0) { //限制滾動範圍y = 0;}else if (y >= sliderMaxHeight) {y = sliderMaxHeight;}var moveScale = y / sliderMaxHeight; slider.style.top = y + "px";middle.style.top = - contMaxHeight * moveScale + "px";}//滾動按鈕拖拽slider.onmousedown = function (event){var event = event || window.event;var disY = event.clientY - slider.offsetTop;document.onmousemove = function (event){var event = event || window.event;y = event.clientY - disY;move();}document.onmouseup = function (){document.onmousemove = null;}return false;}//自訂滾動距離mouseWheel(wrap, function (event, down){if (down){y -= 40;}else{y += 40;}move();});//鍵盤上下鍵控制上下滾動document.onkeydown = function (event){var event = event || window.event;switch (event.keyCode){case 38:y -= 5;break;case 40:y += 5;break;}move();}//點擊捲軸，跳到相應位置sliderWrap.onmousedown = function (event){var event = event || window.event;//計算移動的距離/*滑鼠垂直座標 - 最外層元素上間距 = 滑鼠移動的距離 y值是滑鼠移動的距離再減去滾動按鈕高度的一半，目的使滾動按鈕高度的中心位置對準滑鼠座標*/y = event.clientY - wrap.offsetTop - slider.offsetHeight / 2;move();}}scrollFn();

　　直接鋪上代碼，簡單易懂

js製作列表滾動（有捲軸）