百度搜索了很多判断滚动到底部自动加载的方法,大部分是用iScroll来制作,插件是很好,光用在这一个功能上,有点浪费了。
所以综合了几篇信息总结了一个方法如下:
msg_list_loading = false;
$('.msg_list').on('scroll', function(){
if ( ! msg_list_loading ){
load_more_msg();
}
})
function load_more_msg(){
var msg_list = $('.msg_list');
if ( msg_list.height() + msg_list[0].scrollTop >= msg_list[0].scrollHeight - 60 ) {
msg_list_loading = true;
msg_list.append('<div class="loading"></div>');
$.get('ajax_data.html').done(function( data ){
msg_list.find(".loading").remove();
msg_list.append( data );
msg_list_loading = false;
});
}
}
简单说明:
1、先建立一个变量,判定是否加载中,防止重复加载,
2、在元素上监听scroll事件,调用load_more_msg方法
3、load_more_msg方法中每次重新查找元素,赋给一个变量,判断css高度+滚动的距离,与整个div的文档高度,后面的-60,是一个padding top和bottom的值,可以自行设置。其中msg_list[0]是调用javascript原生对象非jquery对象,方法不同。
4、如果条件为true,锁定加载,ajax调取数据,并执行加载,取消锁定。
哈尔滨品用软件有限公司致力于为哈尔滨的中小企业制作大气、美观的优秀网站,并且能够搭建符合百度排名规范的网站基底,使您的网站无需额外费用,即可稳步提升排名至首页。欢迎体验最佳的哈尔滨网站建设。
