<!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");
var wrapper = document.getElementById("warpper");
// contentMaxT--包裹内容的div最大的top值
var contentMaxT = content.offsetHeight-contentWrapper.offsetHeight;
var TMax = scrollbarp.offsetHeight - scrollbar.offsetHeight;
scrollbar.onmousedown = function(e) {
//记录鼠标的位置,滚动条当前的top
var e = e || window.event;
/***
鼠标按下的时候,记录Y轴偏移距离
这个距离是一个比较的偏移位置
当鼠标滑动的时候鼠标变化的位置,减去鼠标按下的时候
记录的偏移位置,就是滚动条要移动的位置
***/
var disY = e.clientY - this.offsetTop;
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;
fixTop(T);
return false;
}
document.onmouseup = function() {
document.onmouseup = document.onmousemove = null;
if(scrollbar.releaseCapture){
scrollbar.releaseCapture();
}
}
return false;
}
function fixTop(T){
console.log("T ;;;;: "+T);
if (T < 0) {
T = 0;
}
if (T > TMax) {
T = TMax;
}
var scale = T / TMax;
content.style.top = -scale * contentMaxT+"px";
scrollbar.style.top = T + "px";
}
//当鼠标移入的时候对包裹的内容进行鼠标滚轮事件监听,每次加三个像素
wrapper.onmouseover = function(e){
var e = e || window.event;
// e.stopPropgation?e.stopPropgation():e.cancleBubble = true;
//对内容添加鼠标滚轮事件window.onmousewheel=document.onmousewheel
if((window.navigator.userAgent).indexOf("Firefox")>-1){
console.log("火狐");
wrapper.addEventListener("DOMMouseScroll",fixScroll,false);
}else{
console.log("非火狐");
wrapper.focus();//IE下有时候获取焦点有问题,这个修复
wrapper.onmousewheel= fixScroll;
}
//火狐浏览器是添加DOMMouseScroll事件--e.detail 3
wrapper.onmouseout = function(){
wrapper.onmouseout = wrapper.onmousewheel = null;
if((window.navigator.userAgent).indexOf("Firefox")>-1){
wrapper.removeEventListener("DOMMouseScroll",fixScroll,false);}
}
return false;
}
function fixScroll(e){
var e = e || window.event;
var value = e.wheelDelta?e.wheelDelta:-(e.detail);
console.log("事件监听 value: "+value);
e.preventDefault?e.preventDefault():e.returnValue = false;
e.stopPropgation?e.stopPropgation():e.cancleBubble = true;
var stylesTop = scrollbar.currentStyle?scrollbar.currentStyle["top"]:document.defaultView.getComputedStyle(scrollbar,null)["top"];
var myT = parseFloat(stylesTop);
value>0?(myT-=30):(myT+=30);
fixTop(myT);
}
}
</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>