Materiale design lite, Controlla se lo scorrimento ha raggiunto il fondo

Question

Sto usando Material Design lite con Angular.js. Avere il problema di richiamare l'evento quando l'evento raggiunge il fondo. Ho provato quasi tutte le soluzioni ma non funzionante. Come soluzione jQuery:

$(window).scroll(function() { 
    if($(window).scrollTop() + $(window).height() ==  
     $(document).height())   
    { 
     alert("bottom!"); 
    } 
}); 

o JavaScript uno:

document.addEventListener('scroll', function (event) { 
    if (document.body.scrollHeight == 
     document.body.scrollTop + window.innerHeight) { 
     alert("Bottom!"); 
    } 
}); 

Nothings di lavoro. Secondo questa domanda: Material design and jQuery, scroll not working

evento Scroll scatterà dalla classe .mdl-layout__content, ma ancora in grado di ottenere l'evento per la parte inferiore ha raggiunto o meno.

E probabilmente non desidero associare la classe "mdl-layout__content", poiché questa verrà inclusa in ogni pagina. Voglio solo questo per una pagina particolare.

Modificato: Questo codice sta lavorando bene, ma ha problema:

function getDocHeight() { 
    var D = document; 
    return Math.max(
      document.getElementById("porduct-page-wrapper").scrollHeight, 
      document.getElementById("porduct-page-wrapper").offsetHeight, 
      document.getElementById("porduct-page-wrapper").clientHeight 
     ); 
} 
window.addEventListener('scroll', function(){ 
    if($('.mdl-layout__content').scrollTop() + $('.mdl-layout__content').height() == getDocHeight()) { 
      alert("bottom!"); 
    } 
}, true); 

Il problema è che, ogni volta che cambio la pagina e torna indietro, il numero di volte che l'evento dovrebbe chiamato è moltiplicando. Probabilmente è sempre più un evento vincolante, ogni volta che cambio il link della pagina o dei clic. Sto usando Angular.js, come posso evitare questo?

Answer 1

Bene, penso che è possibile risolvere il problema con il rilevamento preciso della posizione del corpo nella richiamata di evento di scorrimento corrente. Utilizzare il metodo di un html elementgetBoundingClientRect:

document.addEventListener('scroll', function (event) { 
    var bodyRect = document.getElementsByTagName('body')[0].getBoundingClientRect(); 
    if (bodyRect.bottom - window.innerHeight <= 20){ 
    // less then 20px rest to get the bottom 
    alert("Bottom!"); 
    } 
});