关于滑动到底部自动加载的介绍

回想前一阵子，做到手机端的一个列表展示，数据量大时，为了不影响用户体验，决定先默认加载十条数据，然后滑动到底部在加载接下来的十条，这里就需要用到捕获滑动到底部的触发事件。

本来还想着偷下懒，结果在网上找了十多篇相关文章对我都没什么用处，那些文章一般是这样的：

开始捕获滚动条滚动事件：$("#shanghuajiazai").scroll(function(){});//通过id捕获有滚动条的元素

先获取浏览器可视高度 ：var windowHeight = $(window).height();//这个是固定的

再获取文档高度：var documentHeight = $(document).height();

接着获取滚动高度：var documentTop = $(document).scrollTop();

接下来再做个比较在执行相关操作：

if(documentTop >= (documentHeight-windowHeight)){
//执行相关操作

}

我就是按这个来，可是问题就出来了，我发现这个或取出来的文档高度也是固定的，这样比较起来根本没法实现我想要的需求，最后也就只有自己再想办法了，随后灵光一闪有解决方案了~

再上图中，class="Mallgoods-list"的div就是我要加载的数据，我在这些数据后边加了一个标识标签

<span id="spanid"></span>

然后同样和之前一样开始捕获滚动条滚动事件：$("#shanghuajiazai").scroll(function(){});//通过id捕获有滚动条的元素

先获取浏览器可视高度 ：var windowHeight = $(window).height();//这个是固定的

//接下来就不一样了

var spanidh=$("#spanid").offset().top;//获取我标识元素到浏览器顶部的高度

//当我的标识标签到浏览器顶部的高度=浏览器可视高度时，说明已经滑到底部，然后就可以在标识元素之前添加你动态加载的数据了，标识元素也会被随着挤下去

//数据加载出来后可以再次滑动，当标识标签到浏览器顶部的高度再次=浏览器可视高度时说明有滑到了底部，以此类推。。。

if(spanidh==scrollHeight){
    //执行相关操作

}

以上就是我个人对于关于滑动到底部自动加载的介绍，希望对你有所帮助与启发。

最后，大家要是觉得好，请点赞，有问题请留言[e-mail]