页面下拉到底部自动加载更多

最新推荐文章于 2023-11-07 13:39:12 发布

曹朋羽

最新推荐文章于 2023-11-07 13:39:12 发布

阅读量1.8k

点赞数

分类专栏： WEB

本文链接：https://blog.csdn.net/sinat_16493273/article/details/50633611

版权

WEB 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

技术要点
检查窗口的滚动事件，判断是否滑动到底部。
需要获取三个高度：
（A）当前窗口可视高度（window.screen.availHeight）
（B）屏幕滚动高度（scrollTop）
（C）当前文本的总高度（document height）
当A+B>=C时证明已滑动到底部，ajax获取数据

代码实现，基于jquery：

$(window).scroll(function () {
    var scrollTop = $(this).scrollTop();
    var docHeight = $(document).height();
    var screenHeight = window.screen.availHeight;
    if((scrollTop + screenHeight) >= docHeight) {
        //TODO 已滑到底部 加载数据
    }
}