angck
2/25/2013 - 9:53 AM
js div 模拟滚动条
js div 模拟滚动条
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="GB2312">
<title></title>
<script type="text/javascript">
function scroll(id,id2){
var obj=document.getElementById(id);
var list=document.getElementById(id2);
list.scrollTop=0;
var oUl=list.children[0];
var bar=obj.getElementsByTagName("div")[0];
var prev=obj.getElementsByTagName("div")[1];
var next=obj.getElementsByTagName("div")[2];
if(oUl.offsetHeight>list.offsetHeight){
obj.style.display='block';
list.style.overflowY='scroll';
//按比例设置滚动条长度
bar.style.height=Math.floor(obj.offsetHeight*list.offsetHeight/oUl.offsetHeight)+'px';
bar.style.overflow='hidden';
//拖拽滚动条事件加载
bar.onmousedown=function(ev){
var o=this;
var oEvent=ev||event;
var y=oEvent.clientY-this.offsetTop;
document.onmousemove=function(ev){
oEvent=ev||event;
var otop=oEvent.clientY-y;
var stop=otop*oUl.offsetHeight/obj.offsetHeight;
if(otop<=0){
o.style.top=0+'px';
list.scrollTop=0;
}else if(otop>=obj.offsetHeight-bar.offsetHeight){
o.style.top=obj.offsetHeight-bar.offsetHeight+'px';
list.scrollTop=oUl.offsetHeight-list.offsetHeight;
}else{
o.style.top=otop+'px';
list.scrollTop=stop;
}
}
document.onmouseup=function(){
document.onmousemove=null;
document.onmouseup=null;
}
}
//向上按钮事件加载
prev.onmousedown=function(){
if(bar.offsetTop>0){
var move=setInterval(function(){
if(bar.offsetTop-obj.offsetHeight*0.02>0){
bar.style.top=bar.offsetTop-obj.offsetHeight*0.02+'px';
list.scrollTop=list.scrollTop-oUl.offsetHeight*0.02;
}else{
clearInterval(move);
bar.style.top=0+'px';
list.scrollTop=0;
}
},100);
prev.onmouseup=function(){clearInterval(move);}
}
}
//向下按钮事件加载
next.onmousedown=function(){
if(bar.offsetTop<obj.offsetHeight-bar.offsetHeight){
var move=setInterval(function(){
if(bar.offsetTop+obj.offsetHeight*0.02<obj.offsetHeight-bar.offsetHeight){
bar.style.top=bar.offsetTop+obj.offsetHeight*0.02+'px';
list.scrollTop=list.scrollTop+oUl.offsetHeight*0.02;
}else{
clearInterval(move);
bar.style.top=obj.offsetHeight-bar.offsetHeight+'px';
list.scrollTop=oUl.offsetHeight-list.offsetHeight;
}
},100);
next.onmouseup=function(){clearInterval(move);}
}
}
//鼠标滚轮事件加载
list.onscroll=function(){
bar.style.top=list.scrollTop*obj.offsetHeight/oUl.offsetHeight+'px';
}
}
}
</script>
</head>
<body>
<div id="news_list" style="height:300px; overflow:hidden">
<div class="news_content" style="height:500px;">
内容
</div>
</div>
<div id="scroll" style="display:none">
<div class="scroll_bar"></div>
<div class="scroll_prev"></div>
<div class="scroll_next"></div>
</div>
<script type="text/javascript">
scroll("scroll","news_list");
</script>
</body>
</html>