$(document）.height(） 和 $(window）.height(） 有什么区别?

What is the difference between $(document).height() and $(window).height()

本文关键字：height 区别 什么 document window      更新时间：2023-09-26

（希望它不是重复的，因为我在搜索和谷歌搜索时没有找到它）

我正在尝试找到如何在某个固定高度的div（'#div'）中检测滚动条何时到达后一个div 的底部。 我应该使用 $(document).height() 和 $(window).height() 来检测此事件吗？

编辑：我的div是固定高度的，我设置了自动滚动，那么如何处理呢？ 如果我应该使用 $（'#div'）.height（），这个高度是固定的....

在.height()文档中： 

$(window).height();   // returns height of browser viewport
$(document).height(); // returns height of HTML document

在您的情况下，听起来您可能想要document的高度而不是window。可以这样想：window高度是你所看到的，但document高度包括低于或高于的所有内容。

例

编辑：

借助scrollTop()方法检查滚动的顶部和底部：

var bottom = $(document).height() - $(window).height();
$(document).scroll(function(){
    var position = $(this).scrollTop();
    if (position === bottom) {
        console.log("bottom");
    }else if(position === 0){
        console.log("top");   
    } else {
        console.log("scrolling");
    }
});

文档高度是整个文档的整个高度，甚至是可查看区域之外的高度。如果您的页面很长，这可能是数千个像素。窗口高度只是可视区域。

$（window）.height（） 和 $（document）.height（） 函数之间的区别。

$（window）.height（） 函数：

理想情况下，$（window）.height（） 返回浏览器窗口的像素较少的高度。这始终是当前浏览器窗口的高度。如果调整浏览器大小，此值应更改。

$（document）.height（） 函数：$（document）.height（） 返回正在呈现的文档高度的无单位像素值。

在 HTML 中，如果您不声明 DOCTYPE，则所有时间 HTML 页面都返回 $（window）.height（） 和 $（document）.height（） 相同的值。

<html>
    <head>
        <script type='text/javascript' src='http://code.jquery.com/jquery-1.10.1.js'></script>

        <script type='text/javascript'>
        $(document).ready(function(){
            $('#winheight').text($(window).height());
            $('#docheight').text($(document).height());
        });
        </script>
    </head>
    <body>
        <div id="console">
            $(window).height() = <span id="winheight"></span> <br/>
            $(document).height() = <span id="docheight"></span>
        </div>
        <p>Lorem ipsum dolor sit amet</p>
    </body>
</html>

输出：

$(window).height() = 750 
$(document).height() = 750
Lorem ipsum dolor sit amet

声明 DOCTYPE 后，它返回完美值。

<!DOCTYPE HTML>
<html>
    write above code here
</html>

输出：

$(window).height() = 750 
$(document).height() = 750
Lorem ipsum dolor sit amet

文档的高度不一定与窗口的高度相同。如果您有一个简单的文档，只有一个 DIV 和一点点文本，则与窗口的高度相比，文档高度将是微不足道的。

以下是来自jQuery源代码的代码：

if (jQuery.isWindow(elem)) {
    // As of 5/8/2012 this will yield incorrect results for Mobile Safari, but there
    // isn't a whole lot we can do. See pull request at this URL for discussion:
    // https://github.com/jquery/jquery/pull/764
    return elem.document.documentElement["client" + name];
}
// Get document width or height
if (elem.nodeType === 9) {
    doc = elem.documentElement;
    // Either scroll[Width/Height] or offset[Width/Height] or client[Width/Height], whichever is greatest
    // unfortunately, this causes bug #3838 in IE6/8 only, but there is currently no good, small way to fix it.
    return Math.max(
    elem.body["scroll" + name], doc["scroll" + name],
    elem.body["offset" + name], doc["offset" + name],
    doc["client" + name]);
}

所以对于$(window) clientHeight使用。其中，正如@Drew正确提到的可见屏幕区域的高度。

对于$(document)将使用当前页面的整个滚动高度。

相关文章：