随着瀑布流的布局深入人心,传统意义上的翻页已经不能满足用户的请求。
现在越来越多的网站,使用无限下拉的方式来展现内容,其实现原理为:
1.首先预先加载一部分内容,并显示出滚动条。
2.监听浏览器滚动条。
3.当滚动条快到浏览器底部的时候,触发请求。
4.加载新的面
代码如下:
var bodyObj = document.documentElement || document.body;
var scrollTop = bodyObj.scrollTop;
var browseHeight = bodyObj.clientHeight || windown.innerHeight;
window.onscroll = function() {
var currentScrollTop = bodyObj.scrollTop;
var pageHeight = bodyObj.scrollHeight;
document.title = currentScrollTop + "|" + browseHeight;
if (pageHeight-(browseHeight + currentScrollTop) < 100) {
document.title = "到底部了!";
} else {
document.title = "还没有到了!";
}
}