jquery > 判断滚动条到底部并加载数据

最新推荐文章于 2021-06-09 17:06:18 发布

mft8899

最新推荐文章于 2021-06-09 17:06:18 发布

阅读量195

点赞数

分类专栏： js + jquery 文章标签： javascript ViewUI

本文链接：https://blog.csdn.net/mft8899/article/details/84434584

版权

js + jquery 专栏收录该内容

31 篇文章 0 订阅

订阅专栏

在有的浏览器中可能会出现累计执行重复执行的情况，可以再准备执行前和执行完毕加以个执行完毕的标记，当判断上一次执行完毕再执行该次操作

<!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">
//首先给窗口绑定事件scroll
$(window).bind("scroll",function() {
    // 然后判断窗口的滚动条是否接近页面底部，这里的20可以自定义
    if ($(document).scrollTop() + $(window).height() > $(document).height() - 20) {
          //我这里偷个懒，没有写ajax的调用，直接触发了链接的click事件。
          $("#container").append('<div style="height:500px">dd</div>');
    }
})
</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>

另外每次下拉到最后浏览器会记住当前滚动条位置会照成刷新页面后直接执行操作，所以在刷新页面时要执行滚动条到顶部的操作

<script> 
$(document).ready(function(){
	$('body,html').animate({scrollTop:0}); 
});
</script>

在jQuery中获取浏览器窗口的尺寸信息

在jQuery中获取浏览器及页面的长度与宽度主要用到以下几个代码：

$(window).height() 　　　　　　　　　　//浏览器时下窗口可视区域高度
$(document).height()　　　　　　　　//浏览器时下窗口文档的高度
$(document.body).height()　　　　　　//浏览器时下窗口文档body的高度
$(document.body).outerHeight(true)　//浏览器时下窗口文档body的总高度包括border padding margin
$(window).width() 　　　　　　　　　　//浏览器时下窗口可视区域宽度
$(document).width()　　　　　　　　　//浏览器时下窗口文档对于象宽度
$(document.body).width()　　　　　　//浏览器时下窗口文档body的高度
$(document.body).outerWidth(true)　//浏览器时下窗口文档body的总宽度包括border padding margin

mft8899

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jquery > 判断滚动条到底部并加载数据

在有的浏览器中可能会出现累计执行重复执行的情况，可以再准备执行前和执行完毕加以个执行完毕的标记，当判断上一次执行完毕再执行该次操作 &lt;!DOCTYPE html&gt;&lt;html&gt;&lt;head&gt;&lt;meta http-equiv="Content-Type" content="text/html; char...
复制链接

扫一扫