<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>模拟滚动条</title>
</head>
<body>
<div style="width:600px; height:500px; position:relative;">
<div style="width:550px; height:500px; background:#CCCCCC; overflow:hidden; position:absolute; left:0; top:0; word-wrap:break-word;" class="aa" id="test_container">
<div style="position:absolute; top:0;" id="test_shower">
<div>一一一一一一一一一一</div>
<div>二二二二二二二二二二</div>
<div>三三三三三三三三三三</div>
<div>四四四四四四四四四四</div>
<div>五五五五五五五五五五</div>
<div>六六六六六六六六六六</div>
<div>七七七七七七七七七七</div>
<div>八八八八八八八八八八</div>
<div>九九九九九九九九九九</div>
<div>十十十十十十十十十十</div>
<div>一一一一一一一一一一</div>
<div style="width:350px; height:300px; position:relative;">
<div style="width:300px; height:300px; background:#CCCCCC; overflow:hidden; position:absolute; left:0; top:0; word-wrap:break-word;" class="aa" id="ins_container">
<div style="position:absolute; top:0;" id="ins_shower">
<div>一一一一一</div>
<div>二二二二二</div>
<div>三三三三三</div>
<div>四四四四四</div>
<div>五五五五五</div>
<div>六六六六六</div>
<div>七七七七七</div>
<div>八八八八八</div>
<div>九九九九九</div>
<div>十十十十十</div>
<div>一一一一一</div>
<div>二二二二二</div>
<div>三三三三三</div>
<div>四四四四四</div>
<div>五五五五五</div>
<div>六六六六六</div>
<div>七七七七七</div>
<div>八八八八八</div>
<div>九九九九九</div>
<div>十十十十十</div>
</div>
</div>
<div style="position:absolute; left:300px; top:0; width:20px; height:300px; -moz-user-focus:ignore;-moz-user-input:disabled;-moz-user-select:none;" id="ins_scroller">
<div style="position:absolute; background:#999999; width:20px; height:20px; left:0; top:0;" id="ins_scroll_up"></div>
<div style="position:absolute; width:20px; height:100px; background:#000000; left:0; top:20px;" id="ins_scroll_bar"></div>
<div style="position:absolute; background:#999999; width:20px; height:20px; left:0; bottom:0;" id="ins_scroll_down"></div>
</div>
</div>
<div>二二二二二二二二二二</div>
<div>三三三三三三三三三三</div>
<div>四四四四四四四四四四</div>
<div>五五五五五五五五五五</div>
<div>六六六六六六六六六六</div>
<div>七七七七七七七七七七</div>
<div>八八八八八八八八八八</div>
<div>九九九九九九九九九九</div>
<div>十十十十十十十十十十</div>
</div>
</div>
<div style="position:absolute; left:550px; top:0; width:20px; height:500px; -moz-user-focus:ignore;-moz-user-input:disabled;-moz-user-select:none;" id="test_scroller">
<div style="position:absolute; background:#999999; width:20px; height:20px; left:0; top:0;" id="test_scroll_up"></div>
<div style="position:absolute; width:20px; height:100px; background:#000000; left:0; top:20px;" id="test_scroll_bar"></div>
<div style="position:absolute; background:#999999; width:20px; height:20px; left:0; bottom:0;" id="test_scroll_down"></div>
</div>
</div>
</body>
</html>
var scroller = function(a){
var self = this;
var timer;
this.container = document.getElementById(a+"_container"); // 容器
this.shower = document.getElementById(a+"_shower"); // 显示的内容
this.scroller = document.getElementById(a+"_scroller"); // 滚动条容器
this.scroll_up = document.getElementById(a+"_scroll_up"); // 上翻按钮
this.scroll_down = document.getElementById(a+"_scroll_down"); // 下翻按钮
this.scroll_bar = document.getElementById(a+"_scroll_bar"); // 滑动块
this.clearselect = window.getSelection ? function(){ window.getSelection().removeAllRanges(); } : function(){ document.selection.empty(); };
this.is_bottom = function(){ // 检测是不是位于底部了
if (self.shower.offsetTop <= self.container.offsetHeight-self.shower.offsetHeight){
return true;
}
return false;
}
this.resetright = function(){
var a = self.shower.offsetTop / (self.shower.offsetHeight - self.container.offsetHeight);
var b = self.scroller.offsetHeight - self.scroll_down.offsetHeight - self.scroll_bar.offsetHeight - self.scroll_up.offsetHeight;
var c = self.scroll_up.offsetHeight + (0 - b * a);
self.scroll_bar.style.top = c + "px";
}
this.resetleft = function(){
var a = (self.scroll_bar.offsetTop - self.scroll_up.offsetHeight) / (self.scroller.offsetHeight - self.scroll_up.offsetHeight - self.scroll_down.offsetHeight - self.scroll_bar.offsetHeight);
var b = self.shower.offsetHeight - self.container.offsetHeight;
var c = 0 - (b * a);
self.shower.style.top = c + "px";
}
this.move=function(a){
if (self.shower.offsetTop+a <= 0 && self.shower.offsetTop+a >= self.container.offsetHeight-self.shower.offsetHeight){
self.shower.style.top = (self.shower.offsetTop+a)+"px";
}else if (self.shower.offsetTop+a > 0){
self.shower.style.top = 0+"px";
}else if (self.shower.offsetTop+a < self.container.offsetHeight-self.shower.offsetHeight){
self.shower.style.top = self.container.offsetHeight-self.shower.offsetHeight+"px";
}
self.resetright();
}
this.upper = function(){
self.clear();
timer = window.setInterval(function(){self.move(2);}, 5);
}
this.downer = function(){
self.clear();
timer = window.setInterval(function(){self.move(-2);}, 5);
}
this.clear = function(){
window.clearInterval(timer);
}
this.test_bar = function(){
if (self.container.offsetHeight < self.shower.offsetHeight){
self.scroller.style.display = "block";
}else {
self.scroller.style.display = "none";
}
}
this.gotobottom = function(){
var a = (self.shower.offsetHeight > self.container.offsetHeight) ? self.container.offsetHeight - self.shower.offsetHeight : 0;
self.shower.style.top = a + "px";
self.test_bar();
self.resetright();
}
this.wheel = function(){
var e=arguments[0]||window.event;
var act = e.wheelDelta ? e.wheelDelta/120 : (0 -e.detail/3);
self.clear();
self.move(80*act);
try{ e.preventDefault();}
catch(e){}
return false;
}
this.barmove = function(){
// 记录当时鼠标的位置与
self.clearselect;
var mover = this;
this.can_move_top = self.scroll_bar.offsetTop - self.scroll_up.offsetHeight; // 这个滚动条上方的可移动距离
this.can_move_bottom = self.scroller.offsetHeight - self.scroll_bar.offsetTop - self.scroll_down.offsetHeight - self.scroll_bar.offsetHeight; // 这个滚动条下方的可移动距离
this.e=arguments[0]||window.event;
this.starts = this.e.clientY;
this.starttop = self.scroll_bar.offsetTop;
this.drag = function(){
this.e=arguments[0]||window.event;
this.ends = this.e.clientY;
this.dis = this.ends - mover.starts;
if (this.dis < (0-mover.can_move_top)) this.dis = 0-mover.can_move_top;
if (this.dis > mover.can_move_bottom) this.dis = mover.can_move_bottom;
self.scroll_bar.style.top = (mover.starttop + this.dis) + "px";
self.resetleft();
self.clearselect;
}
this.cleardrag = function(){
if (window.removeEventListener){
document.removeEventListener("mousemove", mover.drag, true);
}else {
document.detachEvent("onmousemove", mover.drag);
}
self.clearselect;
}
this.add_listener = function(){
if (window.addEventListener){
document.addEventListener("mousemove", mover.drag, true);
document.addEventListener("mouseup", mover.cleardrag, true);
}else {
document.attachEvent("onmousemove", mover.drag);
document.attachEvent("onmouseup", mover.cleardrag);
}
}
this.add_listener();
}
this.outbar = function(){
var e=arguments[0]||window.event;
var obj = e.srcElement ? e.srcElement : e.target;
if (obj.id == self.scroller.id){
var y = e.offsetY || e.layerY;
var new_top = y - 0.5 * self.scroll_bar.offsetHeight;
if (y - self.scroll_up.offsetHeight < 0.5 * self.scroll_bar.offsetHeight) new_top = self.scroll_up.offsetHeight;
if (self.scroller.offsetHeight - y - self.scroll_down.offsetHeight < 0.5 * self.scroll_bar.offsetHeight) new_top = self.scroller.offsetHeight - self.scroll_down.offsetHeight - self.scroll_bar.offsetHeight;
self.scroll_bar.style.top = new_top + "px";
self.resetleft();
}
}
this.scroll_bar.ondrag=function(){return false;}
this.scroll_bar.oncontextmenu=function(){return false;}
this.scroll_bar.onselectstart=function(){return false;}
if (window.addEventListener){
this.scroll_up.addEventListener("mousedown", this.upper, true);
this.scroll_down.addEventListener("mousedown", this.downer, true);
this.scroll_bar.addEventListener("mousedown", this.barmove, true);
this.scroller.addEventListener("mousedown", this.outbar, true);
this.container.parentNode.addEventListener("DOMMouseScroll", this.wheel, true);
this.container.parentNode.addEventListener("mousewheel", this.wheel, true);
document.addEventListener("mouseup", this.clear, true);
}else {
this.scroll_up.attachEvent("onmousedown", this.upper);
this.scroll_down.attachEvent("onmousedown", this.downer);
this.scroll_bar.attachEvent("onmousedown", this.barmove);
this.scroller.attachEvent("onmousedown", this.outbar);
this.container.parentNode.attachEvent("onmousewheel", this.wheel);
document.attachEvent("onmouseup", this.clear);
try{ window.event.cancelBubble=true;}
catch(e){}
}
}
var ins = new scroller("ins");
var te = new scroller("test");
有没办法，鼠标滚轮在里面那个滚动条进行滚动的时候，外面的滚动条也跟着动了，有没办法……让它只响应里面的那层？
var now_wheel = null;
var scroller = function(a){
var self = this;
var timer;
this.container = document.getElementById(a+"_container"); // 容器
this.shower = document.getElementById(a+"_shower"); // 显示的内容
this.scroller = document.getElementById(a+"_scroller"); // 滚动条容器
this.scroll_up = document.getElementById(a+"_scroll_up"); // 上翻按钮
this.scroll_down = document.getElementById(a+"_scroll_down"); // 下翻按钮
this.scroll_bar = document.getElementById(a+"_scroll_bar"); // 滑动块
this.clearselect = window.getSelection ? function(){ window.getSelection().removeAllRanges(); } : function(){ document.selection.empty(); };
this.is_bottom = function(){ // 检测是不是位于底部了
if (self.shower.offsetTop <= self.container.offsetHeight-self.shower.offsetHeight){
return true;
}
return false;
}
this.resetright = function(){
var a = self.shower.offsetTop / (self.shower.offsetHeight - self.container.offsetHeight);
var b = self.scroller.offsetHeight - self.scroll_down.offsetHeight - self.scroll_bar.offsetHeight - self.scroll_up.offsetHeight;
var c = self.scroll_up.offsetHeight + (0 - b * a);
self.scroll_bar.style.top = c + "px";
}
this.resetleft = function(){
var a = (self.scroll_bar.offsetTop - self.scroll_up.offsetHeight) / (self.scroller.offsetHeight - self.scroll_up.offsetHeight - self.scroll_down.offsetHeight - self.scroll_bar.offsetHeight);
var b = self.shower.offsetHeight - self.container.offsetHeight;
var c = 0 - (b * a);
self.shower.style.top = c + "px";
}
this.move=function(a){
if (self.shower.offsetTop+a <= 0 && self.shower.offsetTop+a >= self.container.offsetHeight-self.shower.offsetHeight){
self.shower.style.top = (self.shower.offsetTop+a)+"px";
}else if (self.shower.offsetTop+a > 0){
self.shower.style.top = 0+"px";
}else if (self.shower.offsetTop+a < self.container.offsetHeight-self.shower.offsetHeight){
self.shower.style.top = self.container.offsetHeight-self.shower.offsetHeight+"px";
}
self.resetright();
}
this.upper = function(){
self.clear();
timer = window.setInterval(function(){self.move(2);}, 5);
}
this.downer = function(){
self.clear();
timer = window.setInterval(function(){self.move(-2);}, 5);
}
this.clear = function(){
window.clearInterval(timer);
}
this.test_bar = function(){
if (self.container.offsetHeight < self.shower.offsetHeight){
self.scroller.style.display = "block";
}else {
self.scroller.style.display = "none";
}
}
this.gotobottom = function(){
var a = (self.shower.offsetHeight > self.container.offsetHeight) ? self.container.offsetHeight - self.shower.offsetHeight : 0;
self.shower.style.top = a + "px";
self.test_bar();
self.resetright();
}
this.wheel = function(){
if (now_wheel == null) now_wheel =a;
if (now_wheel == a){
var e=arguments[0]||window.event;
var act = e.wheelDelta ? e.wheelDelta/120 : (0 -e.detail/3);
self.clear();
self.move(80*act);
try{ e.preventDefault();}
catch(e){}
}
window.setTimeout(function(){self.end_wheel();}, 1);
return false;
}
this.end_wheel = function(){
now_wheel = null;
}
this.barmove = function(){
// 记录当时鼠标的位置与
self.clearselect;
var mover = this;
this.can_move_top = self.scroll_bar.offsetTop - self.scroll_up.offsetHeight; // 这个滚动条上方的可移动距离
this.can_move_bottom = self.scroller.offsetHeight - self.scroll_bar.offsetTop - self.scroll_down.offsetHeight - self.scroll_bar.offsetHeight; // 这个滚动条下方的可移动距离
this.e=arguments[0]||window.event;
this.starts = this.e.clientY;
this.starttop = self.scroll_bar.offsetTop;
this.drag = function(){
this.e=arguments[0]||window.event;
this.ends = this.e.clientY;
this.dis = this.ends - mover.starts;
if (this.dis < (0-mover.can_move_top)) this.dis = 0-mover.can_move_top;
if (this.dis > mover.can_move_bottom) this.dis = mover.can_move_bottom;
self.scroll_bar.style.top = (mover.starttop + this.dis) + "px";
self.resetleft();
self.clearselect;
}
this.cleardrag = function(){
if (window.removeEventListener){
document.removeEventListener("mousemove", mover.drag, true);
}else {
document.detachEvent("onmousemove", mover.drag);
}
self.clearselect;
}
this.add_listener = function(){
if (window.addEventListener){
document.addEventListener("mousemove", mover.drag, true);
document.addEventListener("mouseup", mover.cleardrag, true);
}else {
document.attachEvent("onmousemove", mover.drag);
document.attachEvent("onmouseup", mover.cleardrag);
}
}
this.add_listener();
}
this.outbar = function(){
var e=arguments[0]||window.event;
var obj = e.srcElement ? e.srcElement : e.target;
if (obj.id == self.scroller.id){
var y = e.offsetY || e.layerY;
var new_top = y - 0.5 * self.scroll_bar.offsetHeight;
if (y - self.scroll_up.offsetHeight < 0.5 * self.scroll_bar.offsetHeight) new_top = self.scroll_up.offsetHeight;
if (self.scroller.offsetHeight - y - self.scroll_down.offsetHeight < 0.5 * self.scroll_bar.offsetHeight) new_top = self.scroller.offsetHeight - self.scroll_down.offsetHeight - self.scroll_bar.offsetHeight;
self.scroll_bar.style.top = new_top + "px";
self.resetleft();
}
}
this.scroll_bar.ondrag=function(){return false;}
this.scroll_bar.oncontextmenu=function(){return false;}
this.scroll_bar.onselectstart=function(){return false;}
if (window.addEventListener){
this.scroll_up.addEventListener("mousedown", this.upper, false);
this.scroll_down.addEventListener("mousedown", this.downer, false);
this.scroll_bar.addEventListener("mousedown", this.barmove, false);
this.scroller.addEventListener("mousedown", this.outbar, false);
this.container.parentNode.addEventListener("DOMMouseScroll", this.wheel, false);
this.container.parentNode.addEventListener("mousewheel", this.wheel, false);
document.addEventListener("mouseup", this.clear, false);
}else {
this.scroll_up.attachEvent("onmousedown", this.upper);
this.scroll_down.attachEvent("onmousedown", this.downer);
this.scroll_bar.attachEvent("onmousedown", this.barmove);
this.scroller.attachEvent("onmousedown", this.outbar);
this.container.parentNode.attachEvent("onmousewheel", this.wheel);
document.attachEvent("onmouseup", this.clear);
try{ window.event.cancelBubble=true;}
catch(e){}
}
}
var te = new scroller("test");
var ins = new scroller("ins");
加上了全局变量，以及用一个timeout来判断，是可以实现效果，但总感觉有那么一点不好……求有没有更好的办法。