div 滚动条 拖到底部 自动加载数据

Question

根据滚动条的高度值（负数值），以及当前页面高度，你完全可以判断当前应该显示哪一个（或者几个）页面。例如当前页面中高度1000，每DIV高度800，而滚动出去了700那么你就知道应该显示1、2、3共3个页面。然后遍历一下同一个class的DIV吧，看看所加载的页面是否够3页？如果不够则在后边追加div。

Answer 1

计算滚动条位置 。到底部的时候 ajax 请求数据 。append到div里就好了

Answer 2

谢谢大家，我先去看看ajax，然后看看jq怎么检测窗口位置

Answer 3

$(function() {
            $(window).bind("scroll", function() {
                var top = document.documentElement.scrollTop + document.body.scrollTop;
                var textheight = $(document).height();
                var curnum = parseInt($("#hidtxtPdnum").val());
                if (curnum >= 3) { $(".lodingBarStyle").remove(); }
                if (textheight - top - $(window).height() <= 100) {
                    $("#hidtxtPdnum").val(curnum + 1);
                    if (curnum >= 3) {
                        return;
                    }
                                                
                    $.ajax({
                        type: "get",
                        url: "ajax/getInfo.aspx?ppage=" + curnum + "&acDate=" + (new Date().getTime()),
                        success: function(msg) {
                            var $boxes = $(msg);
                            $('#container').append($boxes).masonry('appended', $boxes, true);
                        },
                        error: function() {
                            alert("参数出错，刷新后重试");
                            return false;
                        }
                    });
                }
            });

Answer 4

现在数据能ajax加载了，要开始探测 滚动条 ，判断是否滚到底部
        function GetWeibo(IsFirst) {            var chatId = 0 
            if (IsFirst > 0)
            { chatId = $("div.weibo").last().attr("id"); }            $.ajax({
                type: "get",
                url: "/UserManage/ChatWeiboList",
                data:"&chatId="+chatId,
                error: function (res, status, ex) { alert("对不起，暂时不能获取内容"); },
                success: function (cms) {
                    if (cms == "0") { alert("没有更久的数据了"); }
                    else {
                        //alert("动态信息载入成功，谢谢支持！");
                        if (IsFirst = 0)
                        { $("#weibo").html(cms); }
                        else 
                        { $("#weibo").append(cms); }
                    }
                }
            });
        }

Answer 5

如果是一个div内部的滚动怎么做？比如：
<div id="div1" style="overflow-y:auto; overflow-x:hidden;height:500px;">
<div style="background-color:#ccc;">原有内容；；；；；；；；；</div>
<footer>
<div></div>
</footer>
</div>
当滚动条滚到底部，在<footer></footer>里显示“加载更多”，并触发Ajax