html滚动条往下时载入元素,js实现滚动条滚动到页面底部继续加载

标签：

这是个完整的例子：

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