12

(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-bar is reaching the bottom of this latter div. Should I use $(document).height() and $(window).height() to detect this event ?

Edit : My div which is fixed-height and about which I set auto-scroll, so how to deal with that ? if I am suppose to use $('#div').height(), this height is fixed....

4

5 回答 5

32

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");
    }
});
于 2013-01-24T14:58:27.540 回答
10

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.

于 2013-01-24T14:57:32.020 回答
2

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
于 2014-08-05T07:11:43.027 回答
0

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.

于 2013-01-24T14:57:36.203 回答
0

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.

于 2013-01-24T15:02:05.530 回答