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>
如对本文有疑问, 点击进行留言回复!!
【JavaScript笔记(一)】万丈高楼平地起 - 基本概念篇
轻松解决 org.apache.taglibs.standard.tlv.JstlCoreTLV 困惑
vert实践五——Json?Protocol Buffer?FlatBuffers?
[基于tensorflow的人脸检测] 基于神经网络的人脸检测8——验证训练好的神经网络
网友评论