<!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; } .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 class="scroll"> <div class="bar" id="bar"></div> </div> </div> <script> var box = document.getElementById("box"); var content = document.getElementById("content"); var bar = document.getElementById("bar"); bar.style.height = box.offsetHeight / content.offsetHeight * box.offsetHeight + "px"; bar.onmousedown = function (event) { var event = event || window.event; var pageY = event.pageY || event.clientY + document.documentElement.offsetTop; var barBoxY = pageY - box.offsetTop - bar.offsetTop; document.onmousemove = function (event) { var event = event || window.event; var pageY = event.pageY || event.clientY + document.documentElement.scrollTop; var boxY = pageY - box.offsetTop; var barposi = boxY - barBoxY; if(barposi < 0){ barposi = 0; } if(barposi > box.offsetHeight- bar.offsetHeight){ barposi = box.offsetHeight- bar.offsetHeight; } bar.style.top = barposi + "px"; //4.2清除选中文字 window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty(); content.style.top = -((barposi)/(box.offsetHeight - bar.offsetHeight)*(content.offsetHeight-box.offsetHeight)) + "px"; }; }; bar.onmouseup = function () { document.onmousemove = null; }; </script> </body> </html>
js滚动条特效
最新推荐文章于 2023-02-07 08:20:47 发布