如何用jQuery编写滚动条拉至底部自动加载数据的代码？

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

原文：本文字例讲述了jQuery实现当滑动滚动条到底部加载数据的方法。分享给大大家供大家参考，具体如下：滚动条到底部加载数据原理很简单，就是为window或者滚动元素添加一个scroll事件。

简化版：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理解不同导致处理不同。