自定義滾動條 · JavaScript學習記錄

### 自定義滾動條 - 拖拽 - 只有橫向拖拽 - 限制范圍：范圍的大小 - 計算比例：當前值/最大值 - 控制其他對象 - 例子1：控制物體的大小 - 例子2：控制物體的透明度 - 例子3：控制文字滾動 - 代碼： ```HTML <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> <title>自定義滾動條</title> <link rel="stylesheet" href="../reset.css"> <style> #div0 { margin: 10px auto; width: 600px; height: 400px; position: relative; background-color: blanchedalmond; } /* 上下滾動條 */ #div1 { top: 50px; right: 50px; width: 20px; height: 300px; position: absolute; border: rgb(139, 139, 139) solid 1px; } #div1_0 { width: 20px; height: 40px; position: absolute; background-color: rgb(140, 171, 255); } /* 文字區 */ #div3 { left: 60px; top: 50px; width: 400px; height: 300px; position: absolute; background-color: rgb(255, 255, 255); overflow: hidden; } #div3_0 { width: 900px; position: absolute; white-space: pre-wrap; background-color: cornsilk; } /* 左右滾動條 */ #div2 { top: 5px; right: 140px; width: 400px; height: 20px; position: absolute; border: rgb(139, 139, 139) solid 1px; } #div2_0 { width: 40px; height: 20px; position: absolute; background-color: rgb(140, 171, 255); } </style> <script> // 封裝 getElementById 函數 function get(id) { return document.getElementById(id); } // 封裝獲取計算后元素樣式函數，返回小數 function getStyle(obj, name) { if (obj.currentStyle) { return obj.currentStyle[name]; } else { return getComputedStyle(obj, '') [name]; } } window.onload = function () { var oDiv1 = get('div1'); // 上下滾動框 var oDiv1_0 = get('div1_0'); // 上下滾動條 var oDiv3 = get('div3'); // 文字框 // var oDiv3_0 = get('div3_0'); // 文字可視區 var oDiv2 = get('div2'); // 左右滾動框 var oDiv2_0 = get('div2_0'); // 左右滾動條 // 文字TOP = (文字框高-可視區高) * (滾動條TOP/(滾動框高-滾動條高)) // 鼠標按下滾動條時觸發事件 // 鼠標Y移動時，滾動條top 移動 // 鼠標松開時，事件結束 // 合并函數：ev.clientY offsetTop offsetHeight oDiv1 oDiv1_0 oDiv3 oDiv3_0 // 去掉 offset 改用 getStyle // console.log(oDiv1.children[0], oDiv1_0) // 直接傳一個對象取子節點或父節點 // 面對對象：srcoll 作為 oDiv1_0 和 oDiv2_0 的方法時，可以用 this 代替 oDiv1_0，只要傳入 ev, 'clientY', oDiv3 oDiv1_0.onmousedown = function (ev) { scroll(ev, 'clientY', oDiv1, oDiv3); return false; // 可以解決 chrome FireFox IE9的文字選中問題 } oDiv2_0.onmousedown = function (ev) { scroll(ev, 'clientX', oDiv2, oDiv3); return false; // 可以解決 chrome FireFox IE9的文字選中問題 } function scroll(ev, dir, obj1 , obj2) { var attr = ''; var attr2 = ''; if (dir === 'clientY') { attr = 'height'; attr2 = 'top'; } else if (dir === 'clientX') { attr = 'width'; attr2 = 'left'; } else { return console.log('參數錯誤'); } var oDiv1_0 = obj1.children[0]; var oDiv3_0 = obj2.children[0]; var ev = ev||event; var disMouse = ev[dir]; // 滾動條舊的位置 var oldPos = parseInt(getStyle(oDiv1_0, attr2)); // 滾動范圍 = 滾動條高 + 滾動框高 var disScroll = parseInt(getStyle(obj1, attr)) - parseInt(getStyle(oDiv1_0, attr)); document.onmousemove = function (ev) { ev = ev||event; // 移動距離 var disMove = ev[dir] - disMouse; // 滾動條TOP = 滾動條TOP + 移動距離 var divScroll = oldPos + disMove; // 文字TOP = (文字框高-可視區高) * (滾動條TOP/(滾動框高-滾動條高)) var disTxt = parseInt(getStyle(obj2, attr)) - parseInt(getStyle(oDiv3_0, attr)); var divTxt = (disTxt)*(divScroll/disScroll); // 向下移 disMove > 0; 向上移 disMove < 0 if (disMove > 0 && divScroll <= disScroll) { oDiv1_0.style[attr2] = divScroll + 'px'; oDiv3_0.style[attr2] = divTxt + 'px'; // 文字區 } else if (disMove <= 0 && divScroll >= 0) { // 都 = 0；divScroll 才能取到 0px oDiv1_0.style[attr2] = divScroll + 'px'; oDiv3_0.style[attr2] = divTxt + 'px'; } else { // 防止移動過快超出判斷范圍, 滾動條距離小于 0 直接到達 if (disMove < 0) { oDiv1_0.style[attr2] = 0; oDiv3_0.style[attr2] = 0; } else if (disMove > 0) { oDiv1_0.style[attr2] = disScroll + 'px'; oDiv3_0.style[attr2] = disTxt + 'px'; } } document.onmouseup = function () { this.onmousemove = ''; this.onmouseup = ''; } console.log(disMove,divScroll,disScroll,oldPos,divTxt) } } // oDiv2_0.onmousedown = function (ev) { // var ev = ev||event; // var disMouse = ev.clientX; // var oldPos = this.offsetLeft; // // 滾動范圍 = 滾動條高 + 滾動框高 // var disScroll = oDiv2.offsetWidth - oDiv2_0.offsetWidth -2; // // document.onmousemove = function (ev) { // ev = ev||event; // // 移動距離 // var disMove = ev.clientX - disMouse; // // 滾動條TOP = 滾動條TOP + 移動距離 // var divScroll = oldPos + disMove; // // 文字TOP = (文字框高-可視區高) * (滾動條TOP/(滾動框高-滾動條高)) // var divTxt= (oDiv3.offsetWidth - oDiv3_0.offsetWidth)*(divScroll / disScroll); // // 向下移 disMove > 0; 向上移 disMove < 0 // if (disMove > 0 && divScroll <= disScroll) { // oDiv2_0.style.left = divScroll + 'px'; // oDiv3_0.style.left = divTxt + 'px'; // // 文字區 // } else if (disMove <= 0 && divScroll >= 0) { // // 都 = 0；divScroll 才能取到 0px // oDiv2_0.style.left = divScroll + 'px'; // oDiv3_0.style.left = divTxt + 'px'; // } else { // // 防止移動過快超出判斷范圍, 滾動條距離小于 30 直接到達 // if (disMove < 0 && divScroll < 30) { // oDiv2_0.style.left = 0; // oDiv3_0.style.left = 0; // } else if (disMove > 0 && disScroll - divScroll < 30) { // oDiv2_0.style.left = disScroll + 'px'; // oDiv3_0.style.left = oDiv3.offsetWidth - oDiv3_0.offsetWidth + 'px'; // } // } // document.onmouseup = function () { // this.onmousemove = ''; // this.onmouseup = ''; // } // console.log(disMove,divScroll,disScroll,oldPos,divTxt) // } // return false; // 可以解決 chrome FireFox IE9的文字選中問題 // } } </script> </head> <body> <div id="div0"> <div id="div1"> <div id="div1_0"></div> </div> <div id="div2"> <div id="div2_0"></div> </div> <div id="div3"> <div id="div3_0"> 值描述 normal 默認。空白會被瀏覽器忽略。 pre 空白會被瀏覽器保留。其行為方式類似 HTML 中的標簽。inherit 規定應該從父元素繼承 white-space 屬性的值。 nowrap 文本不會換行，文本會在在同一行上繼續，直到遇到標簽為止。 pre-wrap 保留空白符序列，但是正常地進行換行。 pre-line 合并空白符序列，但是保留換行符。 inherit 規定應該從父元素繼承 white-space 屬性的值。 - 拖拽 - 只有橫向拖拽 - 限制范圍：范圍的大小 - 計算比例：當前值/最大值 - 控制其他對象 - 例子1：控制物體的大小 - 例子2：控制物體的透明度 - 例子3：控制文字滾動 - 代碼：- 拖拽 - 只有橫向拖拽 - 限制范圍：范圍的大小 - 計算比例：當前值/最大值 - 控制其他對象 - 例子1：控制物體的大小 - 例子2：控制物體的透明度 - 例子3：控制文字滾動 - 代碼：- 代碼：- 拖拽 - 只有橫向拖拽 - 限制范圍：范圍的大小 - 計算比例：當前值/最大值 - 控制其他對象 </div> </div> </div> </body> </html> ```