<!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>
<style>
#div1{width:30px;height:500px;background:#000;position:absolute;}
#div2{width:30px;height:100px;background:red;position:absolute;left:0;top:0;display:none;}
#content1{width:500px;height:500px;border:1px solid #063;position:absolute;left:44px; overflow:hidden;}
#content2{position:absolute;}
</style>
<script>
window.onload = function(){
var oDiv1 = document.getElementById(‘div1‘);
var oDiv2 = document.getElementById(‘div2‘);
var oDiv3 = document.getElementById(‘content1‘);
var oDiv4 = document.getElementById(‘content2‘);
var contentHeight = oDiv3.clientHeight-oDiv4.offsetHeight;
if(contentHeight >= 0){
//直接返回
return false;
}
//溢出，显示滚动条
var scrolRatio = oDiv3.clientHeight/oDiv4.offsetHeight;
var scrolHeight = scrolRatio*100;
oDiv2.style.height = scrolHeight+‘px‘;
oDiv2.style.display = ‘block‘;
var maxTop = oDiv1.offsetHeight - oDiv2.offsetHeight;
oDiv2.onmousedown = function(ev){
var ev = ev || event;
var disY = ev.clientY-this.offsetTop;/*鼠标点击到元素的距离*/
document.onmousemove = function(ev){
var ev = ev || event;
var T = ev.clientY-disY;/*元素移动的距离*/
if(T < 0){
T = 0;
}else if(T > maxTop){
T = maxTop;
}
oDiv2.style.top = T+‘px‘;
var iScale = T/maxTop;
oDiv4.style.top = contentHeight*iScale+‘px‘;
};
document.onmouseup = function(){
document.onmousemove = document.onmouseup = null;
};
return false;
};
};
</script>
</head>
<body>
<div id=‘div1‘>
<div id=‘div2‘>
</div>
</div>
<div id=‘content1‘>
<div id=‘content2‘>
yy1<br /> yyl<br /> yy2<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br /> yy3<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br /> yy100<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br /> yy200<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br /> yy400<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br /> yy500<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br /> yy900<br />
</div>
</div>
</body>
</html>
原文地址：https://www.cnblogs.com/moon-yyl/p/8971589.html
时间： 2024-10-13 06:08:34