<!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>
分享到：
相关推荐
标题中的“拖动滚动条自动加载图片页面”指的是网页设计中的一个常见技术，通常被称为“无限滚动”或“滚动监听加载”。这种技术允许用户在滚动页面时，内容（如图片）会随着滚动条的移动而逐步加载，而不是一次性...
页面滚动动态加载数据,页面下拉自动加载内容 相信很多人都见过瀑布流图片布局，那些图片是动态加载出来的，效果很好，对服务器的压力相对来说也小了很多 有手机的相信都见过这样的效果：进入qq空间，向下拉动空间，...
在IT行业中，模拟QQ空间的滑动滚动条自动加载数据是一项常见的前端开发技术，主要用于提升用户体验，特别是对于内容丰富的社交网络平台。这个技术的核心在于实现“无限滚动”或“滚动加载”，即用户在滚动页面时，...
在实现滚动加载中，JQuery的`$(window).scroll()`事件监听用户的滚动行为，`$(document).height()`获取文档总高度，`$(window).height()`获取窗口可视区域高度，以及`$(window).scrollTop()`获取滚动条距离顶部的...
滚动条滚动加载数据，也称为“无限滚动”或“瀑布流加载”，是当用户滚动到页面底部时，新的内容自动加载到页面下方。这种设计模式常用于社交媒体、新闻网站和电商产品列表等，让用户可以无缝浏览大量内容。实现这一...
`swing之滚动条下拉加载数据源码`这个标题暗示了我们将在 Swing 应用程序中实现一个功能，即当用户滚动到底部时自动加载更多数据。这种机制常见于许多现代应用程序，如社交媒体应用、新闻阅读器等，以提高用户体验。...
在一些需要无限滚动或者“下拉加载更多”功能的应用场景中，GridView可以通过添加特定的逻辑来实现这一效果。下面将详细讲解如何实现"GridView滚动到底部加载更多数据"的功能。 首先，我们需要理解这个功能的基本...
"unity3D GUI 滚动条自动伸缩添加字符串"这个主题主要关注如何在GUI系统中动态调整滚动条以适应内容的变化，并且在需要时自动显示。在Unity3D中，滚动条的实现通常结合使用`BeginScrollView`和`EndScrollView`两个...
通过设置`store`的`autoLoad`属性，可以在页面加载时自动加载数据。对于滚动条动态加载，还需要设置`store`的`buffered`属性为`true`，并定义`pageSize`，以确定每次加载的数据量。 6. **事件监听和交互** 用户与...
在网页设计中，当用户滚动到页面底部时自动加载新的内容是一种常见的优化用户体验的技术，通常被称为“无限滚动”或“滚动加载”。这种技术在社交媒体网站如新浪微博、Facebook等广泛使用，因为它可以避免用户手动...
4. **设置列表框属性**：在易语言中，我们需要设置超级列表框的属性，如行数、列数、是否启用自动滚动等，以适应添加滚动条后的新需求。 5. **数据填充与加载**：根据程序的需求，我们需要将数据填充到超级列表框中...
3. **添加滚动条**：在易语言中，我们可以在画板控件的属性中设置“有水平滚动条”和“有垂直滚动条”为真，这样就会在画板周围自动添加滚动条。需要注意的是，需要正确设置滚动条的最小和最大值，以便它们能反映出...
在本示例中，我们将讨论如何结合jQuery和AJAX技术，实现在ASP.NET环境中，当用户滚动滚动条时，下拉列表控件自动加载更多数据的功能。 jQuery是一个流行的JavaScript库，它简化了DOM操作、事件处理以及Ajax交互。在...
在易语言中，滚动条分为水平滚动条和垂直滚动条，分别用于在水平和垂直方向上移动内容。添加滚动条至超级列表框，可以确保用户在数据量较大时仍能轻松浏览所有信息。 3. **源码实现**：在易语言中实现超级列表框加...
当下拉菜单选项比较多的时候，select下拉列表内容过多，在IE中默认是30条选项，firefox默认是20条， 超过自动出现滚动条，但是在没出现滚动条时候样式特别不协调。本次上传的代码将提供一种方法将select下拉框添加...
在H5页面开发中，下拉刷新和上拉加载是常见的功能，...综上所述，H5下拉刷新上拉加载滚动条位置的处理是提升Web应用用户体验的关键一环。通过合理的技术实现和优化策略，我们可以为用户提供更加流畅、自然的浏览体验。
当用户滚动页面时，内容会随着滚动条的下移逐渐加载，这种技术也被称为无限滚动或懒加载，它可以提升用户体验，减少页面初次加载时的数据量。 **jQuery的滚动事件与无限滚动** jQuery提供了`$(window).scroll()`...
1. **属性**：为了控制滚动条的行为，类可能会包含一些属性，如滚动速度、自动滚动模式、是否启用滚动条等。 2. **事件处理**：滚动条的ValueChanged事件需要被监听，当滑块位置改变时，更新Label的文本位置或者...
当用户滚动到ListView的底部时，自动加载更多的数据功能通常被称为“无限滚动”或“下拉加载更多”。这个特性提高了用户体验，避免了用户手动刷新或点击加载按钮来获取新数据的不便。下面将详细解释如何实现ListView...