<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>自定义滚动条</title>
<link rel="stylesheet" href="">
<style type="text/css">
#warpper {
width: 500px;
height: 300px;
margin: 200px;
position: relative;
}
#contentWrapper{
width: 480px;
height: 300px;
position: absolute;
top: 0;
left: 0;
overflow: hidden;
}
#content {
width: 480px;
height: auto;
position: absolute;
top: 0;
left: 0;
line-height: 30px;
}
#scrollbarp {
width: 20px;
background-color: blue;
height: 300px;
position: absolute;
right: 0;
top: 0;
}
#scrollbar {
width: 20px;
background-color: red;
height: 30px;
position: absolute;
top: 0px;
right: 0px;
cursor: hand;
}
</style>
<script type="text/javascript">
window.onload = function() {
var content = document.getElementById("content");
var scrollbar = document.getElementById("scrollbar");
var scrollbarp = document.getElementById("scrollbarp");
scrollbar.onmousedown = function(e) {
//记录鼠标的位置,滚动条当前的top
var e = e || window.event;
/***
鼠标按下的时候,记录Y轴偏移距离
这个距离是一个比较的偏移位置
当鼠标滑动的时候鼠标变化的位置,减去鼠标按下的时候
记录的偏移位置,就是滚动条要移动的位置
***/
var disY = e.clientY - this.offsetTop;
var TMax = scrollbarp.offsetHeight - scrollbar.offsetHeight;
// contentMaxT--包裹内容的div最大的top值
var contentMaxT = content.offsetHeight-contentWrapper.offsetHeight;
console.log("down: disY : "+disY+" cy: "+e.clientY+"-----top: "+this.offsetTop);
if(scrollbar.setCapture){
scrollbar.setCapture();
}
document.onmousemove = function(ev) {
var ev = ev || window.event;
var T = ev.clientY - disY;
if (T < 0) {
T = 0;
}
if (T > TMax) {
T = TMax;
}
var scale = T / TMax;
content.style.top = -scale * contentMaxT+"px";
console.log("disY " + disY + " cy " + ev.clientY + " T " + T);
scrollbar.style.top = T + "px";
return false;
}
document.onmouseup = function() {
document.onmouseup = document.onmousemove = null;
if(scrollbar.releaseCapture){
scrollbar.releaseCapture();
}
}
return false;
}
}
</script>
</head>
<body>
<div id="warpper">
<span id="contentWrapper">
<span id="content">
0水电费使得房贷首付使得房贷首付水电费使得房贷首付水电费使得</br>
1水电费使得房贷首付使得房贷首付水电费</br>
2水电费使得房贷首付使得房贷首付水电费</br>
3水电费使得房贷首付使得房贷首付水电费</br>
4水电费使得房贷首付使得房贷首付水电费</br>
5水电费使得房贷首付使得房贷首付水电费</br>
6水电费使得房贷首付使得房贷首付水电费</br>
7水电费使得房贷首付使得房贷首付水电费</br>
8水电费使得房贷首付使得房贷首付水电费</br>
9水电费使得房贷首付使得房贷首付水电费</br>
0水电费使得房贷首付使得房贷首付水电费</br>
1水电费使得房贷首付使得房贷首付水电费</br>
2水电费使得房贷首付使得房贷首付水电费</br>
3水电费使得房贷首付使得房贷首付水电费</br>
4水电费使得房贷首付使得房贷首付水电费</br>
5水电费使得房贷首付使得房贷首付水电费</br>
6水电费使得房贷首付使得房贷首付水电费</br>
7水电费使得房贷首付使得房贷首付水电费</br>
8水电费使得房贷首付使得房贷首付水电费</br>
9水电费使得房贷首付使得房贷首付水电费</br>
0水电费使得房贷首付使得房贷首付水电费</br>
1水电费使得房贷首付使得房贷首付水电费</br>
2水电费使得房贷首付使得房贷首付水电费</br>
3水电费使得房贷首付使得房贷首付水电费</br>
4水电费使得房贷首付使得房贷首付水电费</br>
5水电费使得房贷首付使得房贷首付水电费</br>
6水电费使得房贷首付使得房贷首付水电费</br>
7水电费使得房贷首付使得房贷首付水电费</br>
8水电费使得房贷首付使得房贷首付水电费</br>
9水电费使得房贷首付使得房贷首付水电费</br>
0水电费使得房贷首付使得房贷首付水电费</br>
0水电费使得房贷首付使得房贷首付水电费使得房贷首付水电费使得</br>
1水电费使得房贷首付使得房贷首付水电费</br>
2水电费使得房贷首付使得房贷首付水电费</br>
3水电费使得房贷首付使得房贷首付水电费</br>
4水电费使得房贷首付使得房贷首付水电费</br>
5水电费使得房贷首付使得房贷首付水电费</br>
6水电费使得房贷首付使得房贷首付水电费</br>
7水电费使得房贷首付使得房贷首付水电费</br>
8水电费使得房贷首付使得房贷首付水电费</br>
9水电费使得房贷首付使得房贷首付水电费</br>
0水电费使得房贷首付使得房贷首付水电费</br>
1水电费使得房贷首付使得房贷首付水电费</br>
2水电费使得房贷首付使得房贷首付水电费</br>
3水电费使得房贷首付使得房贷首付水电费</br>
4水电费使得房贷首付使得房贷首付水电费</br>
5水电费使得房贷首付使得房贷首付水电费</br>
6水电费使得房贷首付使得房贷首付水电费</br>
7水电费使得房贷首付使得房贷首付水电费</br>
8水电费使得房贷首付使得房贷首付水电费</br>
9水电费使得房贷首付使得房贷首付水电费</br>
0水电费使得房贷首付使得房贷首付水电费</br>
1水电费使得房贷首付使得房贷首付水电费</br>
2水电费使得房贷首付使得房贷首付水电费</br>
3水电费使得房贷首付使得房贷首付水电费</br>
4水电费使得房贷首付使得房贷首付水电费</br>
5水电费使得房贷首付使得房贷首付水电费</br>
6水电费使得房贷首付使得房贷首付水电费</br>
7水电费使得房贷首付使得房贷首付水电费</br>
8水电费使得房贷首付使得房贷首付水电费</br>
9水电费使得房贷首付使得房贷首付水电费</br>
0水电费使得房贷首付使得房贷首付水电费</br>
0水电费使得房贷首付使得房贷首付水电费使得房贷首付水电费使得</br>
1水电费使得房贷首付使得房贷首付水电费</br>
2水电费使得房贷首付使得房贷首付水电费</br>
3水电费使得房贷首付使得房贷首付水电费</br>
4水电费使得房贷首付使得房贷首付水电费</br>
5水电费使得房贷首付使得房贷首付水电费</br>
6水电费使得房贷首付使得房贷首付水电费</br>
7水电费使得房贷首付使得房贷首付水电费</br>
8水电费使得房贷首付使得房贷首付水电费</br>
9水电费使得房贷首付使得房贷首付水电费</br>
0水电费使得房贷首付使得房贷首付水电费</br>
1水电费使得房贷首付使得房贷首付水电费</br>
2水电费使得房贷首付使得房贷首付水电费</br>
3水电费使得房贷首付使得房贷首付水电费</br>
4水电费使得房贷首付使得房贷首付水电费</br>
5水电费使得房贷首付使得房贷首付水电费</br>
6水电费使得房贷首付使得房贷首付水电费</br>
7水电费使得房贷首付使得房贷首付水电费</br>
8水电费使得房贷首付使得房贷首付水电费</br>
9水电费使得房贷首付使得房贷首付水电费</br>
0水电费使得房贷首付使得房贷首付水电费</br>
1水电费使得房贷首付使得房贷首付水电费</br>
2水电费使得房贷首付使得房贷首付水电费</br>
3水电费使得房贷首付使得房贷首付水电费</br>
4水电费使得房贷首付使得房贷首付水电费</br>
5水电费使得房贷首付使得房贷首付水电费</br>
6水电费使得房贷首付使得房贷首付水电费</br>
7水电费使得房贷首付使得房贷首付水电费</br>
8水电费使得房贷首付使得房贷首付水电费</br>
9水电费使得房贷首付使得房贷首付水电费</br>
0水电费使得房贷首付使得房贷首付水电费</br>
0水电费使得房贷首付使得房贷首付水电费使得房贷首付水电费使得</br>
1水电费使得房贷首付使得房贷首付水电费</br>
2水电费使得房贷首付使得房贷首付水电费</br>
3水电费使得房贷首付使得房贷首付水电费</br>
4水电费使得房贷首付使得房贷首付水电费</br>
5水电费使得房贷首付使得房贷首付水电费</br>
6水电费使得房贷首付使得房贷首付水电费</br>
7水电费使得房贷首付使得房贷首付水电费</br>
8水电费使得房贷首付使得房贷首付水电费</br>
9水电费使得房贷首付使得房贷首付水电费</br>
0水电费使得房贷首付使得房贷首付水电费</br>
1水电费使得房贷首付使得房贷首付水电费</br>
2水电费使得房贷首付使得房贷首付水电费</br>
3水电费使得房贷首付使得房贷首付水电费</br>
4水电费使得房贷首付使得房贷首付水电费</br>
5水电费使得房贷首付使得房贷首付水电费</br>
6水电费使得房贷首付使得房贷首付水电费</br>
7水电费使得房贷首付使得房贷首付水电费</br>
8水电费使得房贷首付使得房贷首付水电费</br>
9水电费使得房贷首付使得房贷首付水电费</br>
0水电费使得房贷首付使得房贷首付水电费</br>
1水电费使得房贷首付使得房贷首付水电费</br>
2水电费使得房贷首付使得房贷首付水电费</br>
3水电费使得房贷首付使得房贷首付水电费</br>
4水电费使得房贷首付使得房贷首付水电费</br>
5水电费使得房贷首付使得房贷首付水电费</br>
6水电费使得房贷首付使得房贷首付水电费</br>
7水电费使得房贷首付使得房贷首付水电费</br>
8水电费使得房贷首付使得房贷首付水电费</br>
9水电费使得房贷首付使得房贷首付水电费</br>
0水电费使得房贷首付使得房贷首付水电费</br>
0水电费使得房贷首付使得房贷首付水电费使得房贷首付水电费使得</br>
1水电费使得房贷首付使得房贷首付水电费</br>
2水电费使得房贷首付使得房贷首付水电费</br>
3水电费使得房贷首付使得房贷首付水电费</br>
4水电费使得房贷首付使得房贷首付水电费</br>
5水电费使得房贷首付使得房贷首付水电费</br>
6水电费使得房贷首付使得房贷首付水电费</br>
7水电费使得房贷首付使得房贷首付水电费</br>
8水电费使得房贷首付使得房贷首付水电费</br>
9水电费使得房贷首付使得房贷首付水电费</br>
0水电费使得房贷首付使得房贷首付水电费</br>
1水电费使得房贷首付使得房贷首付水电费</br>
2水电费使得房贷首付使得房贷首付水电费</br>
3水电费使得房贷首付使得房贷首付水电费</br>
4水电费使得房贷首付使得房贷首付水电费</br>
5水电费使得房贷首付使得房贷首付水电费</br>
6水电费使得房贷首付使得房贷首付水电费</br>
7水电费使得房贷首付使得房贷首付水电费</br>
8水电费使得房贷首付使得房贷首付水电费</br>
9水电费使得房贷首付使得房贷首付水电费</br>
0水电费使得房贷首付使得房贷首付水电费</br>
1水电费使得房贷首付使得房贷首付水电费</br>
2水电费使得房贷首付使得房贷首付水电费</br>
3水电费使得房贷首付使得房贷首付水电费</br>
4水电费使得房贷首付使得房贷首付水电费</br>
5水电费使得房贷首付使得房贷首付水电费</br>
6水电费使得房贷首付使得房贷首付水电费</br>
7水电费使得房贷首付使得房贷首付水电费</br>
8水电费使得房贷首付使得房贷首付水电费</br>
9水电费使得房贷首付使得房贷首付水电费</br>
0水电费使得房贷首付使得房贷首付水电费</br>
</span>
</span>
<span id="scrollbarp">
<span id="scrollbar"></span>
</span>
</div>
</body>
</html>