实现当拉动滚动条到底部加载数据代码,JS代码库,德仔网

代码语言

代码分类

【JS】实现当拉动滚动条到底部加载数据

作者:Dezai.CN / 发布于2013/2/1/ 3737

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
<title>jQuery实现当拉动滚动条到底部加载数据</title>
<style type="text/css">
*{margin:0;padding:0;}
body{font-size:14px;color:#444;font-family:"微软雅黑",Arial;background:#fff;}
a{color:#444;text-decoration: none;}
a:hover{color:#065BC2;text-decoration: none;}
.clear{clear:both;}
img{border:none;vertical-align: middle;}
ul{list-style: none;}
</style>
</head>
<body>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script type="text/javascript">
var totalheight = 0; 

function loadData()
{ 
    totalheight = parseFloat($(window).height()) + parseFloat($(window).scrollTop()); 

    if ($(document).height() <= totalheight) 
	{ 
		//加载数据
		$("#container").append($(document).scrollTop()+"<br/>");
    } 
} 

$(window).scroll( function() { 
	console.log("滚动条到顶部的垂直高度: "+$(document).scrollTop()); 
	console.log("页面的文档高度 ："+$(document).height());
	console.log('浏览器的高度：'+$(window).height());
	loadData();
}); 
</script>
</head>
<body>
	<div id="container">
		dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>
	</div>
</body>
</html>

试试其它关键字

　拉动滚动条到底部加载数据　

同语言下

可能有用的

Dezai.CN贡献的其它代码(4037)