如何使用jQuery可以让滚轮滚到底部可以自动加载所需内容
话不多说先上代码
$(window).scroll(function() {
var scrollTop = $(this).scrollTop(); //滚动高度
var scrollTop = $(this).scrollTop(); //滚动高度
var windowHeight = $(this).height(); //可见高度
var scrollHeight = $(document).height(); //内容高度
if(scrollTop + windowHeight >= scrollHeight) {
// 此处写滚动条到底部时候触发的事件
for(var i = 0; i <= 10; i++) {
$("#news").append(html1);
}
var scrollHeight = $(document).height(); //内容高度
if(scrollTop + windowHeight >= scrollHeight) {
// 此处写滚动条到底部时候触发的事件
for(var i = 0; i <= 10; i++) {
$("#news").append(html1);
}
}
});
});
这是一段jQuery函数:
(1)首先获取滚动高度,即这个滚轮最开始所在位置,如果没有划过的话默认是0
(2)其次获取可见高度,即屏幕高度,也就是显示屏的高度
(3)接着获取内容的高度也就是你已经加载出来的页面的高度,可能比屏幕大也可能与屏幕相等,取决于你页面中的代码所能展示的高度
(4)最后当你的滚动高度+可见高度>=内容高度,即滚轮的位置+屏幕高度>=你已经加载的页面底部时,触发你要加载的内容
