Material Design Lite, Überprüfen, ob die Rolle bis zum Ende erreicht

Question

Ich verwende Material Design Lite mit Angular.js. Das Problem besteht darin, dass das Ereignis aufgerufen wird, wenn das Ereignis den Boden erreicht hat. Ich habe fast jede Lösung ausprobiert aber nicht funktioniert. Wie jQuery Lösung:

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

Oder Javascript ein:

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

Nothings arbeiten. Nach dieser Frage: Material design and jQuery, scroll not working

Scroll-Ereignis wird auf .mdl-layout__content-Klasse ausgelöst, aber immer noch nicht das Ereignis für den unteren erreicht erreichen oder nicht.

Und wahrscheinlich möchte ich die gerade auf "mdl-layout__content" -Klasse nicht binden, da dies auf jeder Seite enthalten sein wird. Ich will das nur für eine bestimmte Seite.

EDITED: Dieser Code funktioniert gut, hat aber Problem:

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

Problem ist, jedes Mal, wenn ich die Seite zu wechseln, und kommt zurück, die Anzahl der Male der Veranstaltung genannt sollte, multipliziert wird. Wahrscheinlich ist es immer wieder bindendes Ereignis, wenn ich die Seite oder den Link klicke. Ich benutze Angular.js, wie kann ich das verhindern?

Answer 1

Nun, ich denke, Sie können Ihr Problem mit der genauen Erkennung der Körperposition im aktuellen Scroll-Ereignis Rückruf beheben. Verwenden Sie die getBoundingClientRect Methode eines html element:

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!"); 
    } 
});