div滚动底部加载li,window滚动底部加载li
DIV固定高度滚动条滚动最底部，加载新的li
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<style>
ul{
height:500px;
overflow: auto;
}
ul li{
height:60px;
line-height:60px;
}
ul li:first-child{
background: #f00;
}
</style>
</head>
<body>
<ul id="ul">
<li>的第三季度</li>
<li>的第三季度</li>
<li>的第三季度</li>
<li>的第三季度</li>
<li>的第三季度</li>
<li>的第三季度</li>
<li>的第三季度</li>
<li>的第三季度</li> <li>的第三季度结尾</li>
</ul>
<script>
/*屏幕滚动后加载分页*/
$("#ul").scroll(function(){
var nScrollTop=$(this)[0].scrollTop;//滚动条距顶部的高度
var nDivHight=$(this).height();//可见区域的高度
var nScrollHight= $(this)[0].scrollHeight;//为整个UL的高度（包括屏幕外的高度） if(nScrollTop + nDivHight >= nScrollHight){
console.log("滚动条到底部了");
for(var i=0;i<3;i++){
var li=$("<li>我们"+i+"</li>");
$("#ul").append(li);
}
}
});
</script>
</body>
</html>
window固定高度滚动条滚动最底部，加载新的li
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<style>
ul li{
height:60px;
line-height:60px;
}
ul li:first-child{
background: #f00;
}
</style>
</head>
<body>
<ul id="ul">
<li>的第三季度</li>
<li>的第三季度</li>
<li>的第三季度</li>
<li>的第三季度</li>
<li>的第三季度</li>
<li>的第三季度</li>
<li>的第三季度</li>
<li>的第三季度</li>
<li>的第三季度</li>
<li>的第三季度</li>
<li>的第三季度</li>
<li>的第三季度结尾</li>
<li>的第三季度</li>
<li>的第三季度</li>
<li>的第三季度</li>
<li>的第三季度结尾</li>
</ul>
<script>
/*屏幕滚动后加载分页*/
$(window).scroll(function(){
var scrollTop = $(this).scrollTop();//滚动条距离顶部的高度
var scrollHeight = $(document).height();//获取整个页面的高度
var windowHeight = $(this).height();//获取当前可见区域的高度
if(scrollTop + windowHeight == scrollHeight){
console.log("滚动条到底部了");
for(var i=0;i<3;i++){
var li=$("<li>我们"+i+"</li>");
$("#ul").append(li);
}
}
});
</script>
</body>
</html>
div滚动底部加载li,window滚动底部加载li的更多相关文章
- 实现winform DataGridView控件判断滚动条是否滚动到当前已加载的数据行底部
判断 DataGridView控件滚动条是否滚动到当前已加载的数据行底部,其实方法很简单,就是为DataGridView控件添加Scroll事件,然后写入以下代码就可以了,应用范围:可实现分部加载数据 ...
- winform DataGridView控件判断滚动条是否滚动到当前已加载的数据行底部 z
http://www.zuowenjun.cn/post/2015/05/20/162.html 判断 DataGridView控件滚动条是否滚动到当前已加载的数据行底部,其实方法很简单,就是为Dat ...
- 判断DataGridView滚动条是否滚动到当前已加载的数据行底部
private void dataGridView1_Scroll(object sender, ScrollEventArgs e) { if (e.ScrollOrientation == S ...
- PHP+Ajax点击加载更多内容 －这个效果好，速度快，只能点击更多加载，不能滚动自动加载
这个效果好,速度快,只能点击更多加载,不能滚动自动加载 一.HTML部分 <div id="more"> <div class="single_item ...
- 移动端页面 弹出框滚动，底部body锁定，不滚动 / 微信网页禁止回弹效果
需求:页面有弹出层菜单,当弹出层菜单超出屏幕可视区域时,不能滚动.加上滚动后,底部body的滚动事件如何禁止,加上了overflow:hidden;还是不可用. 如下图:地区弹出框可以滚动,而底部的b ...
- iframe,window,滚动栏的一些问题
1.Iframe不显示边框:frameborder=0 2.Iframe不显示横向滚动栏:在iframe所指向的页面增加: <style> html{overflow-x:hidden;} ...
- web自动化，下拉滚动到底部/顶部和下拉滚动到指定的元素
在web自动化,经常会遇到页面显示内容太多的时候,页面就会出现滚动条,一般有两种方式进行下拉,一种是直接下拉到底部/顶部/中部,或者直接给定元素,直接下拉到指定元素的位置. 两种方式的共同点: 两种方 ...
- 让div固定在顶部不随滚动条滚动
让div固定在顶部不随滚动条滚动 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "h ...
- 让div固定在顶部不随滚动条滚动【转】
让div固定在顶部不随滚动条滚动 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "h ...
随机推荐
- 【BZOJ-1340】Escape逃跑问题 最小割
1340: [Baltic2007]Escape逃跑问题 Time Limit: 5 Sec Memory Limit: 162 MBSubmit: 264 Solved: 121[Submit] ...
- mysql中now()函数的使用,还有oracle的sysdate,可能埋下的坑
mysql中now()函数的使用,还有oracle的sysdate 在需求中如果系统中药添加当前操作的时间那么很简单的一个操作在写sql的时候直接在这个字段对应的位置写上now()函数就可以了,这样就 ...
- 【Beta】Scrum04
Info 由于上次验收基本没有人按时完成,缓冲一个任务周期. 时间:2016.12.06 21:30 时长:25min 地点:大运村1号公寓5楼楼道 类型:日常Scrum会议 NXT:2016.12. ...
- <<< java异常The import java.util cannot be resolved
异常:The import java.util cannot be resolved 原因:这是由于你的项目buildpath不对 解决方案:右键项目-------buildpath--------最 ...
- <<< 入侵网站类提权注入教程
---------------------------------------入侵类教程-------------------------------------------------------- ...
- C#之方法的声明与调用
//params关键字使用 class Program { static void Main(string[] args){ , , , }; Console.WriteLine(AddFunctio ...
- [Web开发] 在HTML代码里面如何判断IE版本
在上一篇blog里面提到IE有不同的显示模式以及如何用Javascript 来动态判定. Web开发者可以根据不同显示模式导入不同的内容.这篇blog 主要讲如何让静态HTML代码根据不同IE版本显示 ...
- tyvj4541 zhx 提高组P1
背景 提高组 描述 在一个N×M的棋盘上,要求放置K个车,使得不存在一个车同时能被两个车攻击.问方案数. 输入格式 一行三个整数,N,M,K. 输出格式 一行一个整数,代表答案对1000001取模之后 ...
- tyvj1014 乘法游戏
描述 乘法游戏是在一行牌上进行的.每一张牌包括了一个正整数.在每一个移动中,玩家拿出一张牌,得分是用它的数字乘以它左边和右边的数,所以不允许拿第1张和最后1张牌.最后一次移动后,这里只剩下两张牌. ...
- multipart/form-data和application/x-www-form-urlencoded的区别
在Form元素的语法中,EncType表明提交数据的格式 用 Enctype 属性指定将数据回发到服务器时浏览器使用的编码类型. 下边是说明: application/x-www-form-urle ...