2010-05-12 5 views
18

Estoy tratando de determinar cuándo me desplacé al final de la página (sin usar ninguna biblioteca JS), pero hasta ahora, estoy un poco confundido sobre qué uno de los siguientes para usar. El más prometedor que he visto es window.scrollY, pero incluso cuando se desplaza al final de la página, nunca coincide con el valor de window.innerHeight. ¿Cuál es la mejor manera de hacer esto?Determinando cuándo se desplazó al final de una página con Javascript

window.innerWidth 
window.innerHeight 

window.outerWidth 
window.outerHeight 

window.scrollX 
window.scrollY 

document.body.scrollWidth 
document.body.scrollHeight 
document.body.scrollTop 
document.body.scrollLeft 

document.body.offsetTop 
document.body.offsetLeft 
document.body.offsetWidth 
document.body.offsetHeight 
+0

porqué tome la molestia de tratar con eventos manualmente en lugar de utilizar una biblioteca como jQuery JS? – ThiefMaster

+7

Porque si no entiende cómo hacerlo no podrá construir bibliotecas como jquery – Woot4Moo

Respuesta

24

cuando window.innerHeight + document.body.scrollTop es mayor que o igual a document.body.offsetHeight entonces usted está en la parte inferior

pero desde IE tiene problemas con estas propiedades es necesario utilizar las propiedades alternativas, como

document.documentElement.scrollTop para el desplazamiento y document.documentElement.clientHeight para la altura de la ventana

código completo: http://jsbin.com/egegu3/6/edit

+0

Perfecto, ¡gracias! – chimerical

+1

mootools basado en la versión del código anterior http://jsfiddle.net/KFqpF/7/ – RRG

6

Ser una persona perezosa en el fondo, me gustaría poner un elemento a la parte inferior de la DIV, y aplicar el "element in view" plugin de jQuery en él. (Negación: no tengo experiencia propia con él pero se ve bien.)

Una ligera variación del ejemplo de la entrada de blog:

$('#bottomDIV').bind('inview', function (event, visible) { 
    if (visible == true) { 
    // element is now visible in the viewport 
    highlightButtons(); // or whatever you want to do in the context 
    } 
}); 
0

Esto funciona bien:

window.onscroll = function() 
{ 
    var scrollHeight, totalHeight; 
    scrollHeight = document.body.scrollHeight; 
    totalHeight = window.scrollY + window.innerHeight; 

    if(totalHeight >= scrollHeight) 
    { 
     console.log("at the bottom"); 
    } 
} 
Cuestiones relacionadas