如何用jQuery实现滚动条拉到最底自动加载更多数据的功能？

本文共计939个文字，预计阅读时间需要4分钟。

原文示例讲述了jQuery实现当滚动条滚动到底部加载数据的技巧。以下是简化后的内容：

滚动条到底部加载数据的方法：- 滚动条滚动到底部原理简单，即给window或滚动元素添加scroll事件。- 当滚动事件触发时，检查滚动条是否到达底部，如果是，则加载数据。

本文实例讲述了jQuery实现当拉动滚动条到底部加载数据的方法。分享给大家供大家参考，具体如下：

滚动条到底部加载数据原理很简单，就是为window或者滚动元素添加一个scroll事件，浏览器每次触发scroll事件时判断是否滚动到了浏览器底部，

如果到了底部则加载新数据。关键是计算滚动条是否滚动到了浏览器底部，算法如下

滚动条卷起来的高度 + 窗口高度 > 文档的总高度

$(window).on('scroll',function(){ if(scrollTop() + windowHeight() >= (documentHeight() - 50/*滚动响应区域高度取50px*/)){ loadMore(); } });

获取页面顶部被卷起来的高度函数

//获取页面顶部被卷起来的高度 function scrollTop(){ return Math.max( //chrome document.body.scrollTop, //firefox/IE document.documentElement.scrollTop); }

chrome浏览器和Firefox/IE对滚动条是属于body还是html理解不同导致处理不同。