滚动条自动加载

最新推荐文章于 2025-08-19 08:41:01 发布

原创最新推荐文章于 2025-08-19 08:41:01 发布 · 156 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#xhtml #javascript #ViewUI

HTML 专栏收录该内容

3 篇文章

订阅专栏

<!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 type="text/css">
.homemain {width:800px; height:500px; background: #ccc;padding:10px;overflow:auto;}
#div_outer{background:lightblue;width:700px; border:1px solid #99bbe8; margin: 10px auto; text-align:center;}
</style>
</head>

<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.4.min.js"></script>

<script type="text/javascript" >
		$(function(){
			buildHtml();	
			$("div.homemain").bind("scroll",winScroll);	
		});
		function buildHtml(){
			for(var i=0;i<10;i++){
				var dd=document.createElement('div');
				$(dd).attr("id","div_inner_"+i);
				$(dd).css("width",600);
				$(dd).css("height",100);
				$(dd).css("border","1px solid #cc66e8");
				$(dd).css("margin-top",10);
				$(dd).css("margin-bottom",10);
				
				$(dd).css("margin-left","auto");
				$(dd).css("margin-right","auto");
				
				$(dd).css("text-align","left");
				$(dd).html("<div style='float:right;position:relative;top:70%;padding-right:20px;'> 评论"+t+"_"+i+"("+Math.floor(Math.random()*1000+1)+")");
				
				$(dd).appendTo($('#div_outer'));
			}
			$("#debug").append("批次>>"+t + "<br>");
			t++;
		}
		
		var t=1;
		function winScroll(){
			var scrollTop=$("div.homemain").scrollTop();
			var clientHeight=$("div.homemain")[0].clientHeight;
			var scrollHeight=$("div.homemain")[0].scrollHeight;
			var percent = scrollHeight - clientHeight - scrollTop;
			if(percent < clientHeight*0.2){ 
				$("#debug").append(['scrollTop', scrollTop, 'clientHeight', clientHeight, 'scrollHeight', scrollHeight, 'percent', percent].join(",") + "<br>");
				buildHtml();
			} 
		}
		function debug(){
			var scrollTop=$("div.homemain").scrollTop();
			var clientHeight=$("div.homemain")[0].clientHeight;
			var scrollHeight=$("div.homemain")[0].scrollHeight;
			var percent2 = scrollTop / (scrollHeight-clientHeight);
			$("#debug").append(['scrollTop', scrollTop, 'clientHeight', clientHeight, 'scrollHeight', scrollHeight].join(",") + "<br>");
		}
</script>
<body >
<input type="button" value="debug" onclick="debug()">
<input type="button" value="add" onclick="buildHtml()">
<div class="homemain">
<div id="div_outer" style=""></div>
</div>
公式：scrollHeight=clientHeight+scrollTop（到底)
<div id="debug"></div>
</body>
</html>