垂直滾動條 --> 帥哥天下9帥哥天下9帥哥天下9帥哥天下9帥哥天下9帥哥天下9帥哥天下9 帥哥天下9帥哥天下9帥哥天下9帥哥天下9帥哥天下9帥哥天下9帥哥天下9 帥哥天下9帥哥天下9帥哥天下9帥哥天... ...
<!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>
