案例：滾動條 html框架分為4部分，最外面的div, 放文字的div, 裝滾動條的div層，以及滾動條本身放在一個div裡面 <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> ...
案例：滾動條
html框架分為4部分，最外面的div, 放文字的div, 裝滾動條的div層，以及滾動條本身放在一個div裡面
<!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: #eee; } .bar { height: 100px; width: 100%; position: absolute; top: 0; left: 0; background-color: red; 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 src="common.js"></script> <script> //獲取需要的元素 //最外面的div var box = my$("box"); //文字div var content = my$("content"); //裝滾動條的div---容器 var scroll = my$("scroll"); //滾動條 var bar = my$("bar"); //設置滾動條的高度 //滾動條的高/裝滾動條div的高=box的高/文字div的高 //滾動條的高=裝滾動條div的高*box的高/文字div的高 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(); //滾動條的移動距離/文字的div移動距離=滾動條最大的移動距離/文字div的最大移動距離 var moveY = y * (content.offsetHeight - box.offsetHeight) / (scroll.offsetHeight - bar.offsetHeight); //設置位子div的移動距離 content.style.marginTop = -moveY + "px"; }; }; </script> </body> </html>
