js、div 模拟滚动条，兼容性超强，（IE ，ff ,GOOGLE）

最新推荐文章于 2023-08-29 09:46:27 发布

i_bruce

最新推荐文章于 2023-08-29 09:46:27 发布

阅读量4.6k

点赞数

<!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.οnmοusemοve=function(e){if(Scrolling==false)return;ScroNow(e)}
document.οnmοuseup=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" οnclick="ScroNow(event)"><div id="ScroLine" OnMouseDown="ScroMove()"></div></div></div>

i_bruce

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
js、div 模拟滚动条，兼容性超强，（IE ，ff ,GOOGLE）

--/*主窗*/#Scroll{width:200px;height:400px;background:#f8f8f8}/*左边内容区*/#ScroLeft{float:left;height:100%;width:190px;overflow:hidden}/*滚动条背景*/#ScroRight{position:relative;float:right;height:100%;w
复制链接

扫一扫