材料设计精简版，检查滚动是否到达底部

Question

I am Using Material Design lite with Angular.js. Having the problem to get the event called when the event reach to bottom. I have tried almost every solution but not working. Like jQuery solution :

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

Or Javascript one:

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

Nothings working. According to this question : Material design and jQuery, scroll not working

Scroll event will fire on .mdl-layout__content class, but still unable to get the event for bottom reached or not.

And probably I dont want to bind the even on "mdl-layout__content" class, since this will be included on every page. I just want this for one particular page.

EDITED: This code is working fine but has 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 is, every time I change the page, and comes back, the number of times the event should called is multiplying. Probably it is binding event again and again, whenever I change the page or clicks link. I am using Angular.js, how can I prevent this?

Answer 1

Well, I think you can fix your issue with the exactly detecting of the body position in the current scroll event callback. Use the getBoundingClientRect method of an 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!");
  }
});