Angularjs: How to trigger event when scroll reaches to the bottom of the scroll bar in div?

Question

I'm trying to trigger an event when scroll bar reaches the end. I found this this example. Here is my code. The problem is that it doesn't call loadmore() at all. The values of the console statments are:

848 899 in scroll 881 899 in scroll 892 899 in scroll 897 899 in scroll 900 899 

It seems that it never goes to that if statement! The weird part is that if I debug it in inspect element then it triggers the event. ..... my directive:

directive('scrolly', function () {     return {         restrict: 'A',         link: function (scope, element, attrs) {             var raw = element[0];             console.log('loading directive');             element.bind('scroll', function () {                 console.log('in scroll');                 console.log(raw.scrollTop + raw.offsetHeight);                 console.log(raw.scrollHeight);                 if (raw.scrollTop + raw.offsetHeight == raw.scrollHeight) { //at the bottom                     scope.$apply(attrs.scrolly);                 }             })         }     } 

Answer 1

Instead of checking for equality, please check if the left side is greater than the right side in the if statement since that's the case for the scrollbar to be at the bottom.

raw.scrollTop + raw.offsetHeight > raw.scrollHeight 

Here is the working jsfiddle.