$(document).height() 和 html height:100% 问题答案

【问题标题】：$(document).height() and html height:100% issue$(document).height() 和 html height:100% 问题
【发布时间】：2013-08-31 05:03:24
【问题描述】：

理论上，我有这个函数在滚动到页面底部上方 500 像素时触发。

$(document).ready(function() {
    var timeout = '';
    $(window).scroll(function (e) { 
        var intBottomMargin = 500; 
        clearTimeout(timeout);
        if ($(window).scrollTop() >= $(document).height() - $(window).height() - intBottomMargin) {
          timeout = setTimeout(function(){ 
                $("#next-paginav")[0].click(); 
          }, 300);
        }
    });
});

问题是，我的 html 需要 height:100% 所以文档高度和窗口高度将是“相同的”，对吗？因此该功能不起作用，除了在 OS X 上的 chrome/safari 中，您会在底部有一点反弹，并且 window.scrolltop 暂时超过文档高度。

如何在我的 html 为 100% 高度的情况下使此功能正常工作？

$(document).ready(function() {
    var timeout = '';
    $(window).scroll(function (e) { 
        var intBottomMargin = 500; 
        clearTimeout(timeout);
        if ($(window).scrollTop() >= $('body').height() - $(window).height() - intBottomMargin) {
          timeout = setTimeout(function(){ 
                $("#next-paginav")[0].click(); 
          }, 300);
        }
    });
});

没用。

$(document).ready(function() {
    var timeout = '';
    $(window).scroll(function (e) { 
        var intBottomMargin = 500; 
        clearTimeout(timeout);
        if ($(window).scrollTop() >= $('body').height() - intBottomMargin) {

          timeout = setTimeout(function(){ 
                $("#next-paginav")[0].click(); 
          }, 300);
        }
    });
});

也不行，什么也没有发生。

如何让这个函数在我的 html 和 body 为 100% 高度的情况下工作？

【问题讨论】：

标签： jquery

【解决方案1】：

使用$('body').height() 代替$(document).height()。

【讨论】：

根据 Chrome DevTools 或 FireBug，每个的高度是多少？
body 和 html 都是 1675px 高。
我忘了说，body 也是 100% 高度（这样我可以有一个侧边栏，里面有内容，可以向上/向下滚动而不移动主要内容区域）。
body 高度要覆盖所有内容，超出窗口高度。如果我将浏览器窗口的大小调整为 300px 高，body 仍然可以是 1000+。
对不起，我给了你宽度（已经漫长的一天），body 和 html 的高度是 990px，因为两者都设置为 100% 高度，调整窗口大小时两者的高度相同。

【解决方案2】：

$(window).scrollTop() >= $('body').height() - intBottomMargin

应该做的伎俩。 $(window).height() 不会在 Firefox 中返回与在 chrome 中相同的高度。

【讨论】：

【解决方案3】：

我遇到了同样的问题，并找到了可能的解决方案。您可以克隆并在屏幕外加载正文的内容，计算高度，然后删除所述克隆。

function getDocumentHeight() {
    var $temp = $("<div>")
        .css("position","absolute")
        .css("left","-10000px")
        .append($("body").html());

    $("body").append($temp);
    var h = $temp.height();
    $temp.remove();
    return h;
}

Source

【讨论】：