Material design lite, Check if scroll reached to the bottom

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?

`mdl-layout__content` has the scroll or you want it on window scroll? — Jai, Oct 13 '15 at 09:29
I want it on one of the class which is inside the content. I am genereating views in mdl-layout__content, using angular js. — Rahul Sagore, Oct 13 '15 at 09:59
what is meant was is your document scrollable or specific div is scrollable? — Jai, Oct 13 '15 at 10:05

score 0 · Answer 1 · answered Oct 13 '15 at 09:37

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

I have added more details – Rahul Sagore Oct 13 '15 at 10:23 — Rahul Sagore, Oct 13 '15 at 10:23

Material design lite, Check if scroll reached to the bottom

1 Answers1