<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8" />
<title>demo</title>
<style>
*{margin:0;padding:0;}
ul{list-style-type:none;width:150px;float:left;margin:15px;}
ul li{height:200px;border:1px solid red;margin-top:10px;}
#warp{width:750px;height:auto;border:1px solid #CCC;margin:20px auto;overflow:auto;position:relative;}
</style>
</head>
<body>
<div id='warp'>
<ul id='c1'>
<li>aaaa</li>
<li>bbbb</li>
<li>cccc</li>
<li>ddddd</li>
<li>ffff</li>
<li>ggggg</li>
<li>hhhh</li>
<li>cccc</li>
<li>cccc</li>
<li>cccc</li>
</ul>
<ul id='c2'>
<li>aaaa</li>
<li>bbbb</li>
<li>cccc</li>
<li>dddd</li>
<li>eeee</li>
<li>aaaa</li>
<li>bbbb</li>
<li>cccc</li>
<li>dddd</li>
<li>eeee</li>
<li>aaaa</li>
<li>bbbb</li>
<li>cccc</li>
<li>dddd</li>
<li>eeee</li>
</ul>
<ul id='c3'>
<li>aaaa</li>
<li>bbbb</li>
<li>cccc</li>
<li>aaaa</li>
<li>bbbb</li>
<li>cccc</li>
<li>aaaa</li>
<li>bbbb</li>
<li>cccc</li>
<li>aaaa</li>
<li>bbbb</li>
<li>cccc</li>
<li>aaaa</li>
<li>bbbb</li>
<li>cccc</li>
<li>aaaa</li>
<li>bbbb</li>
<li>cccc</li>
</ul>
<ul id='c4'>
<li>aaaa</li>
<li>bbbb</li>
<li>cccc</li>
<li>aaaa</li>
<li>bbbb</li>
<li>cccc</li>
<li>aaaa</li>
<li>bbbb</li>
<li>cccc</li>
<li>aaaa</li>
<li>bbbb</li>
<li>cccc</li>
<li>aaaa</li>
<li>bbbb</li>
<li>cccc</li>
<li>aaaa</li>
<li>bbbb</li>
<li>cccc</li>
</ul>
</div>
<script>
window.onload=function(){
window.onscroll=function(){
var h=document.documentElement.clientHeight+document.documentElement.scrollTop;
var oul=document.getElementById('warp').getElementsByTagName('ul')
for(var i=0;i<oul.length;i++){
var oli=oul[i].getElementsByTagName('li');
if(posTop(oli[oli.length-1])<h){
console.log(h); //有待完善
}
}
}
}
function posTop(obj){
var top=0;
while(obj){
top+=obj.offsetTop;
obj=obj.offsetParent;
}
return top;
}
</script>
</body>
</html>
