<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="Generator" content="EditPlus®"> <meta name="Author" content=""> <meta name="Keywords" content=""> <meta name="Description" content=""> <title>垂直滚动条</title> <style type="text/css"> .box{ border:1px solid red; width:300px; height:500px; margin:50px auto; overflow:hidden; position:relative; } .content{ height:1000px; padding-right:25px; position:relative; left:0; top:0; } .scrollBox{ position:absolute; top:0; right:0; width:20px; height:500px; background:#b5b5b5; } .scroll{ width:inherit; height:100px; background:#ff3300; position:absolute; left:0; top:0; cursor:pointer; } </style> </head> <body> <!-- 分析 就是一个大盒子 里面有左右两个盒子 左边:文字内容 右边:一个背景滚动条 而且有一个子盒子(红色小方块) 一共四个盒子 结构: <div> <div></div> <div> <div></div> </div> </div> --> <div class="box"> <div class="content"> 帅哥天下9帅哥天下9帅哥天下9帅哥天下9帅哥天下9帅哥天下9帅哥天下9 帅哥天下9帅哥天下9帅哥天下9帅哥天下9帅哥天下9帅哥天下9帅哥天下9 帅哥天下9帅哥天下9帅哥天下9帅哥天下9帅哥天下9帅哥天下9帅哥天下9 帅哥天下9帅哥天下9帅哥天下9帅哥天下9帅哥天下9帅哥天下9帅哥天下9 帅哥天下9帅哥天下9帅哥天下9帅哥天下9帅哥天下9帅哥天下9帅哥天下9 帅哥天下9帅哥天下9帅哥天下9帅哥天下9帅哥天下9帅哥天下9帅哥天下9 帅哥天下9帅哥天下9帅哥天下9帅哥天下9帅哥天下9帅哥天下9帅哥天下9 帅哥天下9帅哥天下9帅哥天下9帅哥天下9帅哥天下9帅哥天下9帅哥天下9 帅哥天下9帅哥天下9帅哥天下9帅哥天下9帅哥天下9帅哥天下9帅哥天下9 帅哥天下9帅哥天下9帅哥天下9帅哥天下9帅哥天下9帅哥天下9帅哥天下9 帅哥天下9帅哥天下9帅哥天下9帅哥天下9帅哥天下9帅哥天下9帅哥天下9 帅哥天下9帅哥天下9帅哥天下9帅哥天下9帅哥天下9帅哥天下9帅哥天下9 帅哥天下9帅哥天下9帅哥天下9帅哥天下9帅哥天下9帅哥天下9帅哥天下9 帅哥天下9帅哥天下9帅哥天下9帅哥天下9帅哥天下9帅哥天下9帅哥天下9 帅哥天下9帅哥天下9帅哥天下9帅哥天下9帅哥天下9帅哥天下9帅哥天下9 帅哥天下9帅哥天下9帅哥天下9帅哥天下9帅哥天下9帅哥天下9帅哥天下9 帅哥天下9帅哥天下9帅哥天下9帅哥天下9帅哥天下9帅哥天下9帅哥天下9 帅哥天下9帅哥天下9帅哥天下9帅哥天下9帅哥天下9帅哥天下9帅哥天下9 帅哥天下9帅哥天下9帅哥天下9帅哥天下9帅哥天下9帅哥天下9帅哥天下9 帅哥天下9帅哥天下9帅哥天下9帅哥天下9帅哥天下9帅哥天下9帅哥天下9 帅哥天下9帅哥天下9帅哥天下9帅哥天下9帅哥天下9帅哥天下9帅哥天下9 帅哥天下9帅哥天下9帅哥天下9帅哥天下9帅哥天下9帅哥天下9帅哥天下9 帅哥天下9帅哥天下9帅哥天下9帅哥天下9帅哥天下9帅哥天下9帅哥天下9 帅哥天下9帅哥天下9帅哥天下9帅哥天下9帅哥天下9帅哥天下9帅哥天下9 </div> <div class="scrollBox"> <div class="scroll"></div> </div> </div> <script type="text/javascript"> /* 初步分析 应该是 红色滚动轴跟随鼠标移动 然后内容根据红色滚动在父元素高度的距离百分比 我移动1% 你移动1% 刚开始的 */ var scroll=document.querySelector(".scroll"); var content=document.querySelector(".content"); var scrollBox=document.querySelector(".scrollBox"); /*内容越多的时候 滚动条应该越短 公式就是 容器高度*容器高度/内容高度 一个属*一个小于一的数 永远不可能大于自己 */ ~~function setScrollLength(){ if(scroll.offsetHeight<=10){ scroll.style.height="10px"; } else{ scroll.style.height=scrollBox.offsetHeight*scrollBox.offsetHeight/content.offsetHeight+"px" } }(); ~~function start(){ scroll.onmousedown=function(event){ var that=this; var event=event||window.event; var top=event.clientY-this.offsetTop; var parentH=scrollBox.offsetHeight; document.onmousemove=function(event){ var event=event||window.event; var y=event.clientY-top; if(y<=0){ y=0; } else if(y>=parentH-that.offsetHeight){ y=parentH-that.offsetHeight; } that.style.top=y+"px"; /* 刚开始就 有滚动条的一部分距离 所以滚动条不可能运动和容器一样的高度 内容同理 内容也会显示一部分(容器高度的)内容 算比例就好了 滚动条运动的距离 内容应该移动的距离 内容高度-容器高度/容器高度-滚动条的高度*滚动条移动的距离 OK */ var start=parentH-that.offsetHeight; content.style.top=-1*parseFloat(content.offsetHeight-parentH)/start*y+"px"; //为了不让下拉滚动条的时候选中字体 window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty(); } } document.onmouseup=function(){ document.onmousemove=null; } }(); </script> </body> </html>
如对本文有疑问, 点击进行留言回复!!
Agora 开源 | 一个 Demo,帮你快速实现社交直播四大场景
vuejs (2)- Vue 生命周期 和 VueJS ajax
网友评论