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 o

Answer 1

I took the Mark's code and I made some changes to add support on div elements. Note that you can define another attribute to configure the threshold (50 in my case).

angular.module('O2DigitalSite').directive('onScrollToBottom', function ($document) {
    //This function will fire an event when the container/document is scrolled to the bottom of the page
    return {
        restrict: 'A',
        link: function (scope, element, attrs) {
            var ele = element[0];
            element.bind("scroll", function () {
                //console.log((ele.scrollTop + ele.offsetHeight) + " / " + (ele.scrollHeight));
                if (ele.scrollTop + ele.offsetHeight >= ele.scrollHeight - 50) {
                    //run the event that was passed through
                    scope.$apply(attrs.onScrollToBottom);
                }
            });
        }
    };
});