<!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>