<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>Document</title>
<style>
*{
padding:0;
margin:0;
}
#demo{
width:300px;
height:500px;
border:1px solid red;
margin:100px;
position:relative;
}
#demo #content{
width:270px;
float:left;
margin-right:2px;
position:absolute;
left:0;
top:0;
}
#demo #gd{
width:28px;
height:500px;
background-color: gray;
float:right;
position: relative;
}
#demo #gd #bar{
width:28px;
position:absolute;
top:0;
right:0;
background-color: red;
height:50px;
}
</style>
</head>
<body>
<div id="demo">
<div id="content">
超級辯手超級辯手超級辯手超級辯手超級辯手超級辯手超級辯手超級辯手超級辯手超級辯手超級辯手超級辯手超級辯手超級辯手超級辯手超級辯手
超級辯手超級辯手超級辯手超級辯手超級辯手超級辯手超級辯手超級辯手超級辯手超級辯手超級辯手超級辯手超級辯手超級辯手超級辯手超級辯手
超級辯手超級辯手超級辯手超級辯手超級辯手超級辯手超級辯手超級辯手超級辯手超級辯手超級辯手超級辯手超級辯手超級辯手超級辯手超級辯手
超級辯手超級辯手超級辯手超級辯手超級辯手超級辯手超級辯手超級辯手超級辯手超級辯手超級辯手超級辯手超級辯手超級辯手超級辯手超級辯手
超級辯手超級辯手超級辯手超級辯手超級辯手超級辯手超級辯手超級辯手超級辯手超級辯手超級辯手超級辯手超級辯手超級辯手超級辯手超級辯手
超級辯手超級辯手超級辯手超級辯手超級辯手超級辯手超級辯手超級辯手超級辯手超級辯手超級辯手超級辯手超級辯手超級辯手超級辯手超級辯手
超級辯手超級辯手超級辯手超級辯手超級辯手超級辯手超級辯手超級辯手超級辯手超級辯手超級辯手超級辯手超級辯手超級辯手超級辯手超級辯手
超級辯手超級辯手超級辯手超級辯手超級辯手超級辯手超級辯手超級辯手超級辯手超級辯手超級辯手超級辯手超級辯手超級辯手超級辯手超級辯手
超級辯手超級辯手超級辯手超級辯手超級辯手超級辯手超級辯手超級辯手超級辯手超級辯手超級辯手超級辯手超級辯手超級辯手超級辯手超級辯手
超級辯手超級辯手超級辯手超級辯手超級辯手超級辯手超級辯手超級辯手超級辯手超級辯手超級辯手超級辯手超級辯手超級辯手超級辯手超級辯手
</div>
<div id="gd">
<div id="bar"></div>
</div>
</div>
</body>
</html>
<script>
var demo=document.getElementById("demo");
var content=document.getElementById("content");
var gd=document.getElementById("gd");
var bar=document.getElementById("bar");
bar .style.height=demo.offsetHeight/content.offsetHeight*demo.offsetHeight+"px"; //滾動條高度=容器高度/內容高度*容器高度
tuodong(bar,content);
function tuodong(obj , target) //obj是拖拽的對象(bar滾動條),target是因為bar的拖拽移動的對象(content)
{
obj.onmousedown=function (event) {
var event=event||window.event;
var t=event.clientY-obj.offsetTop; //t是滾動條bar的頂部距離可視區頂部的距離
document.onmousemove=function (event) {
var event=event||window.event;
obj.style.top=event.clientY-t+"px"; //滾動條距離滾動條盒子的距離等於鼠標距離可視區頂部的距離減去bar的頂部距離可視區頂部的距離
if(parseInt(obj.style.top)<0) if-else的判斷是為了讓bar在gd（滾動條盒子)內移動
{
obj.style.top=0;
}
else if(parseInt(obj.style.top)>demo.offsetHeight-obj.offsetHeight)
{
obj.style.top=demo.offsetHeight-obj.offsetHeight+"px";
}
else{ //在滾動條正常移動的范圍內，內容向上移動的高度等於（內容的高度-大盒子的高度）/（大盒子的高度-滾動條的高度）*滾動條移動的距離（即滾動條距離滾動條盒子頂部的高度）
//因為content向上移動，所以加負號.
target.style.top=-(target.offsetHeight-demo.offsetHeight)/(demo.offsetHeight-obj.offsetHeight)*(obj.offsetTop)+"px";
}
window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty();
}
}
document.onmouseup=function () {
document.onmousemove=null;
}
}
</script>
