标签:
这是个完整的例子:
Title*{
margin:0;
padding:0;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.myBox{
min-height: 1000px;
background-color: #ff0;
overflow: hidden;
}
/*-- 进度条 --*/
.waterfllow-loading {
z-index: 2000;
display: none;
}
.waterfllow-loading.active {
display: block;
}
.waterfllow-loading img.loading-progress {
position: fixed;
/* 设置进度条水平居于窗口正中 */
margin-left: auto;
margin-right: auto;
left:0;
right:0;
/* 不能设置margin-top:auto 和 margin-bottom: auto 否则IE下bottom就不顶用了 */
bottom: 30px;
}
//->获取页面顶部被卷起来的高度
function scrollTop() {
//->document.body.scrollTop(chrome)
//->document.documentElement.scrollTop(firefox/IE)
return Math.max(document.body.scrollTop, document.documentElement.scrollTop);
}
//->获取页面文档的总高度
function documentHeight() {
//->现代浏览器(IE9+和其他浏览器)和IE8的document.body.scrollHeight和
//->document.documentElement.scrollHeight都可以
return Math.max(document.body.scrollHeight,document.documentElement.scrollHeight);
}
//->获取页面浏览器视口的高度
function windowHeight(){
//->document.compatMode有两个取值。
//->BackCompat:标准兼容模式关闭。 CSS1Compat:标准兼容模式开启。
return (document.compatMode == "CSS1Compat") ? document.documentElement.clientHeight : document.body.clientHeight;
}
//->只能使用window方式绑定,使用document方式不起作用
//->图片查询中对浏览器主页面滚动事件处理(瀑布流)
$(window).on('scroll', function() {
// console.log(scrollTop());
console.log(documentHeight()); //->2000
console.log(windowHeight()); //->754,固定的,浏览器可视区域的高度
//->如果滚动条滚动的高度加上窗口可视高度, 大于文档的总高度+50, 那么说明滚动条滚动到了底部。
if(scrollTop() + windowHeight() >= (documentHeight() - 50/*滚动响应区域高度取50px*/)){
console.log('滚动到底部了!');
//->去加载数据
waterallowData();
}
});
//->去加载数据
function waterallowData() {
//->显示进度条
$('.waterfllow-loading').addClass('active');
//->AJAX
$.ajax({
url: 'http://www.xxx.com/api/articles?pageIndex=1&pageSize=10',
type: 'get',
success: function(result) {
//->添加数据
console.log(result);
var ahtml = '
for(var i=0; i
ahtml += '
';
ahtml += result.data[i].title;
ahtml += '
';}
ahtml += '
//->追加HTML到waterfllow-loading的前面
$(".waterfllow-loading").before(ahtml);
//->隐藏进度条
$('.waterfllow-loading.active').removeClass('active');
}
});
}
这个例子实现了滚动到底部继续加载的效果。 但是scroll事件会有抖动。也就是说页面滚动到了底部,去加载数据会频繁执行二、三次。
二、js resize、scroll函数节流与函数防抖
参考博客:
标签:
来源: https://blog.csdn.net/qq_25354709/article/details/85295600