<!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> var box = my$("box"); var content = my$("content"); var scroll = my$("scroll"); var bar = my$("bar"); //设置滚动条高度 //滚动条的高=装滚动条的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); content.style.marginTop = -moveY+"px" } }; document.onmouseup = function () { document.onmousemove = null; }; </script> </body> </html>
JavaScriptDOM练习之滚动条效果
最新推荐文章于 2022-08-03 09:44:08 发布