JS实现的DIV模拟滚动条(支持IE6,7,8/FF)
首页 »
CSS »
精选JS » JS实现的DIV模拟滚动条(支持IE6,7,8/FF)
最近老看浏览器的滚动条不顺眼,设置滚动条样式也只是IE的特有属性.抽了点时间用JS写了个模拟滚动条.IE下支持滚轮滚动,FF下暂时只能用鼠标拖动.说完废话,下面看代码吧~
<!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=gb2312" />
<title>--</title>
<style>
/*主窗*/
#Scroll{width:200px;height:400px;background:#f8f8f8}
/*左边内容区*/
#ScroLeft{float:left;height:100%;width:190px;overflow:hidden}
/*滚动条背景*/
#ScroRight{position:relative;float:right;height:100%;width:10px;background:#F1F1F1;overflow:hidden;}
/*滚动条*/
#ScroLine{position:absolute;z-index:1;top:0px;left:0px;width:100%;height:20px;overflow:hidden;background:#666666}
</style>
</head>
<script>
var Scrolling=false;
function $(o){return document.getElementById(o)}
function ScroMove(){Scrolling=true}
document.onmousemove=function(e){if(Scrolling==false)return;ScroNow(e)}
document.onmouseup=function(e){Scrolling=false}
function ScroNow(event){
var event=event?event:(window.event?window.event:null);
var Y=event.clientY-$("Scroll").getBoundingClientRect().top-$("ScroLine").clientHeight/2;
var H=$("ScroRight").clientHeight-$("ScroLine").clientHeight;
var SH=Y/H*($("ScroLeft").scrollHeight-$("ScroLeft").clientHeight);
if (Y<0)Y=0;if (Y>H)Y=H;
$("ScroLine").style.top=Y+"px";
$("ScroLeft").scrollTop=SH;
}
function ScrollWheel(){
var Y=$("ScroLeft").scrollTop;
var H=$("ScroLeft").scrollHeight-$("ScroLeft").clientHeight;
if (event.wheelDelta >=120){Y=Y-80}else{Y=Y+80}
if(Y<0)Y=0;if(Y>H)Y=H;
$("ScroLeft").scrollTop=Y;
var SH=Y/H*$("ScroRight").clientHeight-$("ScroLine").clientHeight;
if(SH<0)SH=0;
$("ScroLine").style.top=SH+"px";
}
</script>
<body>
<div id="Scroll" onselectstart="return false" onmousewheel="ScrollWheel()"><div id="ScroLeft">
内容1111<br>内容<br>内容<br>内容<br>内容<br>内容<br>内容<br>内容<br>内容<br>
内容<br>内容<br>内容<br>内容<br>内容<br>内容<br>内容<br>内容<br>内容<br>
内容<br>内容<br>内容<br>内容<br>内容5555<br>内容<br>内容<br>内容<br>内容<br>
内容<br>内容<br>内容<br>内容<br>内容<br>内容<br>内容<br>内容<br>内容<br>
内容<br>内容<br>内容<br>内容<br>内容<br>内容<br>内容<br>内容<br>内容0000<br>
</div><div id="ScroRight" onclick="ScroNow(event)"><div id="ScroLine" OnMouseDown="ScroMove()"></div></div></div>
相关项目
