相信很多人都看到了QQ空间,或者淘宝界面上的,页面上的滚动条拉到底部会自动异步加载数据的形式,其实很简单,使用了js滚动条,滚动的触发事件可以实现类似的技术,
直接看代码:
$(window).scroll(function () {
var scrollTop = $(this).scrollTop();
var scrollHeight = $(document).height();
var windowHeight = $(this).height();
if (scrollTop + windowHeight == scrollHeight) {
//异步加载数据的方法
}
});
判断滚动条是否到底部,需要用到DOM的三个属性值,即scrollTop、clientHeight、scrollHeight。
scrollTop为滚动条在Y轴上的滚动过距离。
clientHeight为浏览器内容可视区域的高度。
scrollHeight为内容可视区域的高度加上溢出(滚动)的距离(网页的实际高度)。
从这个三个属性的介绍就可以看出来,滚动条到底部的条件即为scrollTop + clientHeight == scrollHeight