js实现滚动条边滚动边加载数据

最新推荐文章于 2024-07-16 17:26:59 发布

yi念zhi间

最新推荐文章于 2024-07-16 17:26:59 发布

阅读量5.3k

点赞数

分类专栏： js 文章标签： js 边滚动边加载

本文链接：https://blog.csdn.net/c13_tianming/article/details/48635209

版权

js 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

相信很多人都看到了QQ空间，或者淘宝界面上的，页面上的滚动条拉到底部会自动异步加载数据的形式，其实很简单，使用了js滚动条，滚动的触发事件可以实现类似的技术，

直接看代码：

 $(window).scroll(function () {
        var scrollTop = $(this).scrollTop();
        var scrollHeight = $(document).height();
        var windowHeight = $(this).height();
        if (scrollTop + windowHeight == scrollHeight) {
           //异步加载数据的方法
        }
    });

判断滚动条是否到底部，需要用到DOM的三个属性值，即scrollTop、clientHeight、scrollHeight。

scrollTop为滚动条在Y轴上的滚动过距离。

clientHeight为浏览器内容可视区域的高度。

scrollHeight为内容可视区域的高度加上溢出（滚动）的距离（网页的实际高度）。

从这个三个属性的介绍就可以看出来，滚动条到底部的条件即为scrollTop + clientHeight == scrollHeight