Lite material design, check if scroll reached bottom

Question

I am using Material Design lite with Angular.js. There is a problem with calling the event when the event reaches the bottom. I tried almost all the solutions, but did not work. As a 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!"); } }); 

Nonting works. On this subject: Material design and jQuery, scrolling does not work

The scroll event will fire on .mdl-layout__content, but still will not be able to get the event for the bottom, achieved or not.

And probably I don’t want to bind the even to the "mdl-layout__content" class, as this will be included on every page. I just want this for one specific page.

Editorial: This code works fine, but has a 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); 

The problem is that every time I change the page and return, the number of times the event should trigger is multiplied. This is probably a binding event over and over whenever I change the link to a page or clicks. I am using Angular.js, how can I prevent this?

Answer 1

Well, I think you can fix your problem with pinpointing body position in the current scroll event callback. Use the getBoundingClientRect html element method:

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