原生JS寫自定義滾動條！附帶完整程式碼+思路
阿新 • • 發佈：2018-12-10
一、佈局思路 一個大盒子-->box，
左邊一個div-->con中用來放content， 右邊一個div-->scroll裡面套一個div-->bar用來寫滾動條。 共計4個div 二、先確定bar的高度 bar的高度要隨著content中的內容的變化而變化。 即有一個比例關係： bar的高度/scroll的高度 = box的高度/con的高度，求出bar的高度 三、讓bar動起來
原理同上面的放大鏡和拖拽，即當點選的時候，獲取當前的滑鼠位置，減去當前的offsetleft 即可得到滑鼠點在元素上的位置(space)，當移動的時候，用現在的滑鼠位置減去space即可得到 元素的left位置。設定即可。 四、給bar設定可以移動的範圍，確保在scroll裡移動 最小為 0
最大為scroll的高度減去bar的高度。 五、讓bar動的時候，con也動，且動的方向跟bar相反 此時存在一個比例關係：即bar的運動距離 / bar的總運動範圍 = con的運動距離 / con的總的運動範圍 因此 con的運動距離為 = bar的運動距離 / bar的總運動範圍 * con的總的運動範圍 算出距離後，使用marginTop即完成，注意，值需要為負值。 六、優化 設定
window.getSelection?window.getSelection().removeAllRanges():document.selection.empty();注意設定在onmousemov裡面即可設定在滾動的時候選不中文字。
完整程式碼如下：
<!DOCTYPE html> <html> <head> <title>自定義滾動條</title> </head> <style> * { margin: 0; padding: 0; } #box { width: 300px; height: 500px; border: 1px solid red; margin: 300px; overflow: hidden; } #content { width: 266px; float: left; } #scroll { width: 30px; height: 100%; float: right; border: 1px solid lime; position: relative; } #bar { width: 30px; background-color: purple; border-radius: 25px; position: absolute; top: 0; } </style> <body> <div id="box"> <div id="content"> 床前明月光，床前明月光，床前明月光，床前明月光，床前明月光，床前明月光，床前明月光，床前明月光， 床前明月光，床前明月光，床前明月光，床前明月光，床前明月光，床前明月光，床前明月光，床前明月光， 床前明月光，床前明月光，床前明月光，床前明月光，床前明月光，床前明月光，床前明月光，床前明月光， 床前明月光，床前明月光，床前明月光，床前明月光，床前明月光，床前明月光，床前明月光，床前明月光， 床前明月光，床前明月光，床前明月光，床前明月光，床前明月光，床前明月光，床前明月光，床前明月光， 床前明月光，床前明月光，床前明月光，床前明月光，床前明月光，床前明月光，床前明月光，床前明月光， 床前明月光，床前明月光，床前明月光，床前明月光，床前明月光，床前明月光，床前明月光，床前明月光， 床前明月光，床前明月光，床前明月光，床前明月光，床前明月光，床前明月光，床前明月光，床前明月光， 床前明月光，床前明月光，床前明月光，床前明月光，床前明月光，床前明月光，床前明月光，床前明月光， 床前明月光，床前明月光，床前明月光，床前明月光，床前明月光，床前明月光，床前明月光，床前明月光， 床前明月光，床前明月光，床前明月光，床前明月光，床前明月光，床前明月光，床前明月光，床前明月光， 床前明月光，床前明月光，床前明月光，床前明月光，床前明月光，床前明月光，床前明月光，床前明月光， 床前明月光，床前明月光，床前明月光，床前明月光，床前明月光，床前明月光，床前明月光，床前明月光， 床前明月光，床前明月光，床前明月光，床前明月光，床前明月光，床前明月光，床前明月光，床前明月光， 床前明月光，床前明月光，床前明月光，床前明月光，床前明月光，床前明月光，床前明月光，床前明月光， 床前明月光，床前明月光，床前明月光，床前明月光，床前明月光，床前明月光，床前明月光，床前明月光， 床前明月光，床前明月光，床前明月光，床前明月光，床前明月光，床前明月光，床前明月光，床前明月光， 床前明月光，床前明月光，床前明月光，床前明月光，床前明月光，床前明月光，床前明月光，床前明月光， 床前明月光，床前明月光，床前明月光，床前明月光，床前明月光，床前明月光，床前明月光，床前明月光， 床前明月光，床前明月光，床前明月光，床前明月光，床前明月光，床前明月光，床前明月光，床前明月光， 床前明月光，床前明月光，床前明月光，床前明月光，床前明月光，床前明月光，床前明月光，床前明月光，明月光， 床前明月光，床前明月光，床前明月光，床前明月光，床前明月光，床前明月光，床前明月光，床前明月光， 床前明月光，床前明月光，床前明月光，床前明月光，床前明月光，床前明月光，床前明月光，床前明月光， 床前明月光，床前明月光，床前明月光，床前明月光，床前明月光，床前明月光，床前明月光，床前明月光， 床前明月光，床前明月光，床前明月光，床前明月光，床前明月光，床前明月光，床前明月光，床前明月光， 床前明月光，床前明月光，床前明月光，床前明月光，床前明月光，床前明月光，床前明月光，床前明月光， 床前明月光，床前明月光，床前明月光，床前明月光，床前明月光，床前明月光，床前明月光，床前明月光， 床前明月光，床前明月光，床前明月光，床前明月光，床前明月光，床前明月光，床前明月光，床前明月光， 床前明月光，床前明月光，床前明月光，床前明月光，床前明月光，床前明月光，床前明月光，床前明月光， 床前明月光，床前明月光，床前明月光，床前明月光，床前明月光，床前明月光，床前明月光，床前明月光， 床前明月光，床前明月光，床前明月光，床前明月光，床前明月光，床前明月光，床前明月光，床前明月光， 床前明月光，床前明月光，床前明月光，床前明月光，床前明月光，床前明月光，床前明月光，床前明月光， 床前明月光，床前明月光，床前明月光，床前明月光，床前明月光，床前明月光，床前明月光，床前明月光， 床前明月光，床前明月光，床前明月光，床前明月光，床前明月光，床前明月光，床前明月光，床前明月光， 床前明月光，床前明月光，床前明月光，床前明月光，床前明月光，床前明月光，床前明月光，床前明月光， 床前明月光，床前明月光，床前明月光，床前明月光，床前明月光，床前明月光，床前明月光，床前明月光，明月光， 床前明月光，床前明月光，床前明月光，床前明月光，床前明月光，床前明月光，床前明月光，床前明月光， 床前明月光，床前明月光，床前明月光，床前明月光，床前明月光，床前明月光，床前明月光，床前明月光， 床前明月光，床前明月光，床前明月光，床前明月光，床前明月光，床前明月光，床前明月光，床前明月光， 床前明月光，床前明月光，床前明月光，床前明月光，床前明月光，床前明月光，床前明月光，床前明月光 </div> <div id="scroll"> <div id="bar"></div> </div> </div> <script> var oBox = document.getElementById("box"); var oCon = document.getElementById("content"); var oScroll = document.getElementById("scroll"); var oBar = document.getElementById("bar"); //bar的高度為，bar高度/scroll的高度 = box的高度/content的高度 //bar高度 = box的高度*scroll的高度/content的高度 var height = parseInt(oBox.offsetHeight * oScroll.offsetHeight) / parseInt(oCon.offsetHeight); oBar.style.height = height + "px"; oBar.onmousedown = function (e) { var cY = parseInt(e.clientY); var oH = parseInt(this.offsetTop); var spaceY = cY - oH; document.onmousemove = function (e) { //滑鼠移動時，不選中文字 window.getSelection?window.getSelection().removeAllRanges():document.selection.empty(); // var nowX = e.clientX; var nowY = parseInt(e.clientY); // var x = nowX - spaceX; var y = nowY - spaceY; // oBar.style.left = x + "px"; //比例問題：bar的移動距離/bar的可以移動的距離 = content的移動距離 / content可以移動的距離 //content的移動距離 = y/bar的可以移動的距離 * content可以移動的距離 var baHeight = parseInt(oScroll.offsetHeight - oBar.offsetHeight); y = y<0?y=0:y; y = y>baHeight?baHeight:y; var conHeight = parseInt(oCon.offsetHeight - oBox.offsetHeight); var conY = y * conHeight / baHeight ; oBar.style.top = y + "px"; oCon.style.marginTop = -conY + "px"; } } document.onmouseup = function () { document.onmousemove = null; } </script> </body> </html>