<!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>
</head>
<script type="text/javascript" src="jquery-1.4.2.js"></script>
<script type="text/javascript" >
$(function(){
$(window).bind("scroll",winScroll);
});
/**
滚动条加载事件
*/
var t=11;
var docHeigth=0;
function winScroll(){
//"滚动条自动加 -->"+$(window).height()
var scrollTop=$(window).scrollTop();
var docHeigth=$(document).height();
if(docHeigth-scrollTop<=1000){
if(t<100){
for(var i=0;i<10;i++){
var dd=document.createElement('div');
$(dd).attr("id","div_inner_"+t);
$(dd).css("width",1000);
$(dd).css("height",200);
$(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_inner_"+t);
$(dd).appendTo($('#div_outer'));
t++;
}
}
//$(window).scrollTop(scrollTop);
}
//"滚动条自动加 -->"+$(window).height()
document.title=$(document).height()+"--"+scrollTop;
}
</script>
<body>
<div id="div_outer" style="width:1024px; border:1px solid #99bbe8; margin: 10px auto; text-align:center;">
<div id="div_inner_1" style="width:1000px; height:200px; border:1px solid #cc66e8; margin:10px auto; text-align:left;">
div_inner_1
</div>
<div id="div_inner_2" style="width:1000px; height:200px; border:1px solid #cc66e8; margin:10px auto; text-align:left;">
div_inner_2
</div>
<div id="div_inner_3" style="width:1000px; height:200px; border:1px solid #cc66e8; margin:10px auto; text-align:left;">
div_inner_3
</div>
<div id="div_inner_4" style="width:1000px; height:200px; border:1px solid #cc66e8; margin:10px auto; text-align:left;">
div_inner_4
</div>
<div id="div_inner_5" style="width:1000px; height:200px; border:1px solid #cc66e8; margin:10px auto; text-align:left;">
div_inner_5
</div>
<div id="div_inner_6" style="width:1000px; height:200px; border:1px solid #cc66e8; margin:10px auto; text-align:left;">
div_inner_6
</div>
<div id="div_inner_7" style="width:1000px; height:200px; border:1px solid #cc66e8; margin:10px auto; text-align:left;">
div_inner_7
</div>
<div id="div_inner_8" style="width:1000px; height:200px; border:1px solid #cc66e8; margin:10px auto; text-align:left;">
div_inner_8
</div>
<div id="div_inner_9" style="width:1000px; height:200px; border:1px solid #cc66e8; margin:10px auto; text-align:left;">
div_inner_9
</div>
<div id="div_inner_10" style="width:1000px; height:200px; border:1px solid #cc66e8; margin:10px auto; text-align:left;">
div_inner_10
</div>
</div>
</body>
</html>
分享到：
相关推荐
4. `jquery.scrollLoading.js`：这个文件可能是基于jQuery编写的脚本，专门用于实现滚动条自动加载图片或页面内容的功能。它可能包含了监听滚动事件、判断加载时机、请求新数据以及插入新内容到页面等逻辑。 综上所...
页面滚动动态加载数据,页面下拉自动加载内容 相信很多人都见过瀑布流图片布局，那些图片是动态加载出来的，效果很好，对服务器的压力相对来说也小了很多 有手机的相信都见过这样的效果：进入qq空间，向下拉动空间，...
这种技术允许用户在浏览网页时无需点击分页按钮，只需将页面滚动到最底部，更多内容就会自动加载出来，提高了用户体验，特别是在内容丰富的网站如社交媒体、新闻聚合平台等。 ### 1. HTML5 HTML5是现代网页开发的...
`swing之滚动条下拉加载数据源码`这个标题暗示了我们将在 Swing 应用程序中实现一个功能，即当用户滚动到底部时自动加载更多数据。这种机制常见于许多现代应用程序，如社交媒体应用、新闻阅读器等，以提高用户体验。...
滚动条滚动加载数据，也称为“无限滚动”或“瀑布流加载”，是当用户滚动到页面底部时，新的内容自动加载到页面下方。这种设计模式常用于社交媒体、新闻网站和电商产品列表等，让用户可以无缝浏览大量内容。实现这一...
在网页设计中，当用户滚动到页面底部时自动加载新的内容是一种常见的优化用户体验的技术，通常被称为“无限滚动”或“滚动加载”。这种技术在社交媒体网站如新浪微博、Facebook等广泛使用，因为它可以避免用户手动...
"unity3D GUI 滚动条自动伸缩添加字符串"这个主题主要关注如何在GUI系统中动态调整滚动条以适应内容的变化，并且在需要时自动显示。在Unity3D中，滚动条的实现通常结合使用`BeginScrollView`和`EndScrollView`两个...
在Android开发中，GridView是一种常用的布局控件，它允许我们以网格形式展示数据，通常...同时，通过自定义Adapter和监听滚动事件，开发者可以根据自己的需求对加载更多数据的过程进行定制，以满足各种复杂场景的需求。
3. **添加滚动条**：在易语言中，我们可以在画板控件的属性中设置“有水平滚动条”和“有垂直滚动条”为真，这样就会在画板周围自动添加滚动条。需要注意的是，需要正确设置滚动条的最小和最大值，以便它们能反映出...
4. **设置列表框属性**：在易语言中，我们需要设置超级列表框的属性，如行数、列数、是否启用自动滚动等，以适应添加滚动条后的新需求。 5. **数据填充与加载**：根据程序的需求，我们需要将数据填充到超级列表框中...
通过设置`store`的`autoLoad`属性，可以在页面加载时自动加载数据。对于滚动条动态加载，还需要设置`store`的`buffered`属性为`true`，并定义`pageSize`，以确定每次加载的数据量。 6. **事件监听和交互** 用户与...
在IT行业中，模拟QQ空间的滑动滚动条自动加载数据是一项常见的前端开发技术，主要用于提升用户体验，特别是对于内容丰富的社交网络平台。这个技术的核心在于实现“无限滚动”或“滚动加载”，即用户在滚动页面时，...
在本示例中，我们将讨论如何结合jQuery和AJAX技术，实现在ASP.NET环境中，当用户滚动滚动条时，下拉列表控件自动加载更多数据的功能。 jQuery是一个流行的JavaScript库，它简化了DOM操作、事件处理以及Ajax交互。在...
当下拉菜单选项比较多的时候，select下拉列表内容过多，在IE中默认是30条选项，firefox默认是20条， 超过自动出现滚动条，但是在没出现滚动条时候样式特别不协调。本次上传的代码将提供一种方法将select下拉框添加...
最后，编写滚动条的滚动事件，根据滚动条的改变动态更新列表框的显示内容。 4. **关键代码段**：在易语言中，通常会用到`窗口控件.滚动条位置`和`窗口控件.设置滚动条位置`等命令来控制滚动条的位置和更新列表框...
在H5页面开发中，下拉刷新和上拉加载是常见的功能，...综上所述，H5下拉刷新上拉加载滚动条位置的处理是提升Web应用用户体验的关键一环。通过合理的技术实现和优化策略，我们可以为用户提供更加流畅、自然的浏览体验。
1. **属性**：为了控制滚动条的行为，类可能会包含一些属性，如滚动速度、自动滚动模式、是否启用滚动条等。 2. **事件处理**：滚动条的ValueChanged事件需要被监听，当滑块位置改变时，更新Label的文本位置或者...
当用户滚动页面时，内容会随着滚动条的下移逐渐加载，这种技术也被称为无限滚动或懒加载，它可以提升用户体验，减少页面初次加载时的数据量。 **jQuery的滚动事件与无限滚动** jQuery提供了`$(window).scroll()`...
通过这种方式，我们可以创建一个交互式的、具有加载效果的滚动条，用户在滚动时，后台会自动加载更多数据。这在处理大量数据或者流式内容的应用中非常实用。注意，实际的代码实现可能会根据具体需求有所不同，这里...
当用户滚动到ListView的底部时，自动加载更多的数据功能通常被称为“无限滚动”或“下拉加载更多”。这个特性提高了用户体验，避免了用户手动刷新或点击加载按钮来获取新数据的不便。下面将详细解释如何实现ListView...