网页滚动到底部自动加载数据

0x01 前言

我之前在不少手机APP和网页上见到滚动加载 的效果，当我们的页面将要滚动到底部时，页面将自动ajax获取数据，并填充至底部，不需要主动刷新，用户浏览起来感觉非常的流畅。

0x02 原理

监听滚动事件

window

和

DOM元素

上面有一个

onscroll

事件，每当页面滚动时会触发此事件。

绑定

window

/

document

/

document.body

中任意一个的

onscroll

事件即可。

0x03 代码编写

html我们用ement语法生成。

ul>li{$$}*50

CSS代码，将元素的margin值去除更方便我们计算。

html,
body {
margin: 0;
}

ul {
margin: 0;
}

js代码

window.onscroll = function(e) {
console.log(document.body.scrollTop);
}

滚动页面时会输出当前body的scrollTop值

计算到页面底部的距离

当页面滚动到底部

document.body.offsetHeight= window.innerHeight + document.body.scrollTop



因此，

距离底部的高度 = document.body.offsetHeight - (window.innerHeight + document.body.scrollTop)

window.onscroll = function(e) {
console.log('距离底部:%d', document.body.offsetHeight - (window.innerHeight + document.body.scrollTop));
}

注意：

如果body上默认的

margin:8px

没去掉，会出现这样的效果



这是因为body实际占用高度变大，滚动距离增加了

8 + 8 = 16px

的距离，且

margin

值是不计入高度内的。

最后的代码如下：

window.onscroll = function(e) {
var diff = document.body.offsetHeight - (window.innerHeight + document.body.scrollTop);
console.log('距离底部:%d', diff);
if (diff < 30) {
//loadHTML(); //ajax加载s数据
}
}