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

前端 未结 5 1532
我寻月下人不归
我寻月下人不归 2021-02-13 23:05

(Hope it is not a duplicate because I didn\'t find it when searching and googling)

I am trying to find how to detect in some fixed-height div (\'#div\') when the scroll-

相关标签:
5条回答
  • 2021-02-13 23:30

    Here's the code from jQuery source:

    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]);
    }
    

    So for $(window) clientHeight is used. Which, as @Drew correctly mentioned the height of visible screen area.

    For $(document) the whole scroll height of the current page will be used.

    0 讨论(0)
  • 2021-02-13 23:38

    Difference between $(window).height() and $(document).height() function.

    $(window).height() function:

    Ideally $(window).height() returns the pixel less height of browser window. This is always the height of current browser window. If you resize browser this value should change.

    $(document).height() function: $(document).height() returns an unit-less pixel value of the height of the document being rendered.

    In HTML if you dont declare DOCTYPE then all time HTML page returns $(window).height() and $(document).height() same value.

    <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>
    

    Output :

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

    After declare DOCTYPE its returns perfect value.

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

    Output :

    $(window).height() = 750 
    $(document).height() = 750
    Lorem ipsum dolor sit amet
    
    0 讨论(0)
  • 2021-02-13 23:39

    The height of the document is not necessarily the same as the height of the window. If you have a simple document with just a DIV and a little bit of text, the doc height will be miniscule compared to the height of the window.

    0 讨论(0)
  • 2021-02-13 23:46

    In the .height() documentation:

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

    In your case it sounds like you may want the height of the document rather than the window. Think of it this way: The window height is what you see, but the document height includes everything below or above.

    EXAMPLE

    EDIT:

    Checking for top and bottom on scroll with help from the scrollTop() method:

    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");
        }
    });
    
    0 讨论(0)
  • 2021-02-13 23:50

    The document height is the entire height of the whole document, even what is outside the viewable area. This could be thousands of pixels if you have a long page. The window height is just the viewable area.

    0 讨论(0)
提交回复
热议问题