自定義滾動條—比例移動和滑鼠移動時移除其他功能的相容程式碼
阿新 • • 發佈：2018-12-21
要點：
1.因為各個不同版本的瀏覽器的，他們的滾動條的樣式不是一樣的，為了統一，自定義樣式。
2.核心問題跟上一個案例（高清放大鏡）是一樣的，就是怎麼保證成比例移動問題
3.滑鼠移動時，去除其他功能的相容程式碼問題
程式碼：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> * { margin: 0; padding: 0; } .box { width: 300px; height: 500px; border: 1px solid red; margin: 100px; position: relative; overflow: hidden; } .content { padding: 5px 18px 5px 5px; position: absolute; top: 0; left: 0; } .scroll { width: 18px; height: 100%; position: absolute; top: 0; right: 0; background-color: #797272; } .bar { height: 100px; width: 100%; position: absolute; top: 0; left: 0; background-color: #BF7777; border-radius: 10px; cursor: pointer; } </style> </head> <body> <div class="box" id="box"> <div class="content" id="content"> 好好學習，天天向上，毛主席說的。 好好學習，天天向上，毛主席說的。 好好學習，天天向上，毛主席說的。 好好學習，天天向上，毛主席說的。 好好學習，天天向上，毛主席說的。 好好學習，天天向上，毛主席說的。 好好學習，天天向上，毛主席說的。 好好學習，天天向上，毛主席說的。 好好學習，天天向上，毛主席說的。 好好學習，天天向上，毛主席說的。 好好學習，天天向上，毛主席說的。 好好學習，天天向上，毛主席說的。 好好學習，天天向上，毛主席說的。 好好學習，天天向上，毛主席說的。 好好學習，天天向上，毛主席說的。 好好學習，天天向上，毛主席說的。 好好學習，天天向上，毛主席說的。 好好學習，天天向上，毛主席說的。 好好學習，天天向上，毛主席說的。 好好學習，天天向上，毛主席說的。 好好學習，天天向上，毛主席說的。 好好學習，天天向上，毛主席說的。 好好學習，天天向上，毛主席說的。 好好學習，天天向上，毛主席說的。 好好學習，天天向上，毛主席說的。 好好學習，天天向上，毛主席說的。 好好學習，天天向上，毛主席說的。 好好學習，天天向上，毛主席說的。 好好學習，天天向上，毛主席說的。 好好學習，天天向上，毛主席說的。 好好學習，天天向上，毛主席說的。 好好學習，天天向上，毛主席說的。 好好學習，天天向上，毛主席說的。 好好學習，天天向上，毛主席說的。 好好學習，天天向上，毛主席說的。 好好學習，天天向上，毛主席說的。 好好學習，天天向上，毛主席說的。 好好學習，天天向上，毛主席說的。 好好學習，天天向上，毛主席說的。 好好學習，天天向上，毛主席說的。 好好學習，天天向上，毛主席說的。 好好學習，天天向上，毛主席說的。 好好學習，天天向上，毛主席說的。 好好學習，天天向上，毛主席說的。 好好學習，天天向上，毛主席說的。 好好學習，天天向上，毛主席說的。 好好學習，天天向上，毛主席說的。 好好學習，天天向上，毛主席說的。 好好學習，天天向上，毛主席說的。 </div><!--文字內容--> <div id="scroll" class="scroll"><!--裝滾動條的層--> <div class="bar" id="bar"></div><!--滾動條--> </div> </div> <script type="text/javascript"> function myGet(id){ return document.getElementById(id); } var box = myGet("box"); // 獲取顯示文字區域的盒子 var content = myGet("content"); // 實際的內容 var scroll = myGet("scroll"); // 獲取z裝滾動條的部分 var bar = myGet("bar"); // 獲取滾動條 var height = scroll.offsetHeight * (box.offsetHeight / content.offsetHeight); bar.style.height = height + "px"; // 滑動條的高度 = 裝滑動條的容器高度 * 文字顯示區域的高度和文字內容高度的比值 bar.onmousedown = function(e){ var spaceY = e.clientY - bar.offsetTop; // 滑鼠點選時，點選位置距離上邊的距離 document.onmousemove = function(e){ var y = e.clientY - spaceY; y = y<0 ? 0 : y; y = y>scroll.offsetHeight - bar.offsetHeight ? scroll.offsetHeight - bar.offsetHeight : y; // 控制滾動條的移動範圍 bar.style.top = y + "px"; window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty(); // 滑鼠移動時，移除其他功能的相容程式碼 var moveY = y * ((content.offsetHeight-box.offsetHeight)/(scroll.offsetHeight-bar.offsetHeight)); // 內容移動距離 = 滾動條移動的距離 * 內容移動最大值和滾動條移動最大值的比值 content.style.marginTop = -moveY + "px"; } } document.onmouseup = function(){ document.onmousemove = null; } </script> </body> </html>
效果：
