<!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>
分享到：
相关推荐
当拖动滚动条时会自动加载图片页面，由于数据量庞大，如果一次性完全加载的话，会消耗大量的带宽，通过边拖动滚动条边加载可以加载更多数据。
下面小编就为大家带来一篇js/jquery控制页面动态加载数据 滑动滚动条自动加载事件的方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
页面滚动到底部自动加载数据功能模拟，HTML5+Jquery，需要的下载看一下
android控件GridView实现滚动到底部加载更多数据效果
自己我感觉不错。留着以后也许会有用。模拟QQ空间，滑动滚动条，自动加载数据..
当下拉菜单选项比较多的时候，select下拉列表内容过多，在IE中默认是30条选项，firefox默认是20条， 超过自动出现滚动条，但是在没出现滚动条时候样式特别不协调。本次上传的代码将提供一种方法将select下拉框添加...
1 已经成功实现对ListView滚动条的自定义，定义的效果和新浪微博，QQ微博...的效果一样。 2 实现了对ListView分批量加载数据，滑动到ListView底部的时候会自动加载数据。
1.asp.net 滚动条到达底部，页面自动ajax读取数据追加到页面中 2.ajax查询数据 3.到达底部判断 4.到达底部触发追加数据方法 5.原有数据不清除，只在原有数据上追加新数据 6.VS2015开发，第一次运行，请重新生成解决...
用VScrollBar控制webbrowser的滚动条，如在触摸屏上webBrowser垂直滚动条太小，不方便使用，用VScrollBar来替换,
参数说明 listLoadingMore({id:"",id2:function(){},...loading()：根据当前滚动条的位置，自动判断是否需要加载新数据； show(boolean,boolean)：强制设置加载中和加载完成dom的显示或隐藏，true表示显示，false相对。
Google阅读器上有一个AJAX scollLoad效果很不错，就是阅读项目时不需要翻页，浏览器滚动条往下拉到一定位置时自动加载新的一批项目进来，一直到所有项目加载完为止。要知道，数据量增加很频繁时，要通过定位页码来...
当滚动条滑到底部时自动加载内容</title> <meta http-equiv=Content-Type content=text/html;charset=UTF-8/> <style type=text/css> body{ background-color: #808080; } #main{ margin:0...
希望页面加载完毕后向左自动滚动一定位置，下面有个不错的方法可以轻松帮大家实现下
设置页面加载时滚动条自动滚到底的方法： jQuery： 代码如下: $(function(){ var h = $(document).height()-$(window).height(); $(document).scrollTop(h); }); JavaScript： 代码如下: [removed] = ...
主要介绍了基于javascript实现浏览器滚动条快到底部时自动加载数据的相关资料,需要的朋友可以参考下
显示滚动条的Flash图文列表，用Flash实现的左图右文，如果用Flash设计一个网站，那么本效果可作为一个图文列表页，相信会比较酷，而且右侧自动生成滚动条，自动模拟加载的内容显示滚动条。
数据异步加载可以发生在用户点击“查看更多”按钮或滚动条滚动到窗口的底部时自动加载；在接下来的博文中，我们将介绍如何实现自动加载更多的功能。 图1 微博加载更多功能 正文 假设，在我们的数据库中存放着用户的...
listview异步加载图片,滚动条滚动到地步自动调用后台异步加载数据