JQUERY滚动加载

最新推荐文章于 2025-08-12 14:37:12 发布

weixin_30950607

最新推荐文章于 2025-08-12 14:37:12 发布

阅读量77

点赞数

CC 4.0 BY-SA版权

文章标签： javascript json ViewUI

原文链接：http://www.cnblogs.com/gaocy/p/8892473.html

本文介绍了一种使用JavaScript实现的网页滚动加载更多功能的方法。通过监听浏览器滚动事件，结合网页高度、视窗高度及滚动位置等参数判断是否加载更多内容，并通过AJAX请求获取新数据并追加到页面。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

$(document).height()：整个网页的高度
$(window).height()：浏览器可视窗口的高度
$(window).scrollTop()：浏览器可视窗口顶端距离网页顶端的高度（垂直偏移）
用一句话理解就是：当网页滚动条拉到最低端时，$(document).height() == $(window).height() + $(window).scrollTop()。
当网页高度不足浏览器窗口时$(document).height()返回的是$(window).height()。

$(window).scroll(function(event) {
    var d_height = $(document).height();
    var c_height = $(window).height();
    var s_height = $(document).scrollTop();
    var height = $(".hd_gzbg").height() + $(".nsy_footer").height() + 200;
    if (d_height - c_height - s_height <= height) {
        if (do_submit) {
            do_submit = 0;
            $.ajax({
                url:"",
                type:"GET",
                data:{},
                dataType:"json",
                success:function(result){
                    if (result.errNo == 0) {
                        do_submit = 1;
                        page += 1;
                        $("#id").append(html);
                    }
                }
            });
        }
    }
});