Determinare quando si scorre verso il basso di una pagina con Javascript

Sto provando a determinare quando ho spostato fino alla fine della pagina (senza usare alcuna libreria JS), ma finora, sono un po ‘confuso su quale delle seguenti cose usare. Il più promettente che ho visto è window.scrollY , ma anche quando scorre verso la parte inferiore della pagina, non corrisponde mai al valore di window.innerHeight . Qual’è il miglior modo per farlo?

 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 

quando window.innerHeight + document.body.scrollTop è maggiore o uguale a document.body.offsetHeight allora sei in fondo

ma dal momento che IE ha problemi con queste proprietà è necessario utilizzare proprietà alternative, come

document.documentElement.scrollTop per scroll e document.documentElement.clientHeight per l’altezza della finestra

codice completo: http://jsbin.com/egegu3/6/edit

Essendo una persona pigra a cuore, metterei un elemento in fondo al DIV e applicherei il plugin jQuery ” elemento in vista ” su di esso. (Disclaimer: non ho alcuna esperienza con esso, ma sembra buono).

Una leggera variante dell’esempio dal post di 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 } }); 

Questo funziona bene:

  window.onscroll = function() { var scrollHeight, totalHeight; scrollHeight = document.body.scrollHeight; totalHeight = window.scrollY + window.innerHeight; if(totalHeight >= scrollHeight) { console.log("at the bottom"); } }