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

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数据   
            }
        }