JS实现-页面数据无限加载

本站寻求有缘人接手，详细了解请联系站长QQ1493399855

    在手机端浏览网页时，经常使用一个功能，当我们浏览京东或者淘宝时，页面滑动到底部，我们看到数据自动加载到列表。之前并不知道这些功能是怎么实现的，于是自己在PC浏览器上模拟实现这样的功能。先看看浏览效果：

    当滚动条滚动到页面底部时，提示“正在加载…”。

    当页面已经加载了所有数据后，滚动到页面底部会提示“数据已加载到底了”：

    实现数据无限加载的过程大致如下：

    1.滚动条滚动到页面底部。

    2.触发ajax加载，把请求返回的数据加载到列表后面。

     如何判断滚动条是否滚动到页面底部？我们可以设置一个规则：当滚动条的滚动高度和整个文档高度相差不到20像素，则认为滚动条滚动到页面底部了：

    文档高度 - 视口高度 - 滚动条滚动高度 < 20

    要通过代码实现这样的判断，我们必须要了解上面的这些高度通过哪些代码获取？可以参考我之前写的一篇“HTML元素坐标定位，这些知识点得掌握”。

    上面的判断，我封装了一个方法：

//检测滚动条是否滚动到页面底部function isScrollToPageBottom(){//文档高度var documentHeight = document.documentElement.offsetHeight;var viewPortHeight = getViewportSize().h;var scrollHeight = window.pageYOffset ||document.documentElement.scrollTop ||document.body.scrollTop || 0;return documentHeight - viewPortHeight - scrollHeight < 20;}