Cuál es la diferencia entre $ (documento) .height () y $ (window) .height ()

(Espero que no sea un duplicado porque no lo encontré al search y search en Google)

Estoy tratando de encontrar cómo detectar en algún div de altura fija ('#div') cuando la barra de desplazamiento está llegando al final de este último div. ¿Debo usar $(document).height() y $(window).height() para detectar este evento?

Editar: Mi div que es de altura fija y sobre el que configuro el desplazamiento automático, entonces, ¿cómo lidiar con eso? si se supone que debo usar $ ('# div'). height (), esta altura se fija ….

En la documentation de .height() :

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

En su caso, parece que desea la altura del document lugar de la window . Piénselo de esta manera: la altura de la window es lo que ve, pero la altura del document incluye todo lo de abajo o arriba.

EJEMPLO

EDITAR :

Comprobación de la parte superior e inferior en desplazamiento con la ayuda del método 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"); } }); 

La altura del documento es la altura completa de todo el documento, incluso lo que está fuera del área visible. Esto podría ser miles de píxeles si tienes una página larga. La altura de la window es solo el área visible.

Diferencia entre las funciones $ (window) .height () y $ (documento) .height ().

Función $ (window) .height ():

Idealmente, $ (window) .height () devuelve la altura de píxel less de la window del browser. Este es siempre el alto de la window del browser actual. Si cambia el tamaño del browser, este valor debería cambiar.

Función $ (document) .height (): $ (document) .height () devuelve un valor de píxel sin unidad del alto del documento que se está procesando.

En HTML, si no declara DOCTYPE, la página HTML de todos los times devuelve $ (window) .height () y $ (document) .height () el mismo valor.

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

Salida:

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

Después de declarar DOCTYPE, devuelve un valor perfecto.

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

Salida:

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

La altura del documento no es necesariamente la misma que la altura de la window. Si tiene un documento simple con solo un DIV y un poco de text, la altura del documento será minúscula en comparación con la altura de la window.

Aquí está el código de la fuente 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]); } 

Entonces, para $(window) clientHeight se usa la clientHeight . Que, como @Drew mencionó correctamente la altura del área de pantalla visible.

Para $(document) , se usará la altura de desplazamiento completa de la página actual.