I'm trying to work with this AngularJS infinite-scroll directive. Here's the source:

angular.module('infiniteScroll', [])
    .directive('infiniteScroll', [ "$window", function ($window) {
        return {
            link:function (scope, element, attrs) {
                var offset = parseInt(attrs.threshold) || 0;
                var e = element[0];

                element.bind('scroll', function () {
                    if (scope.$eval(attrs.canLoad) && e.scrollTop + e.offsetHeight >= e.scrollHeight - offset) {
                        scope.$apply(attrs.infiniteScroll);
                    }
                });
            }
        };
    }]);

This appears to work only for elements which are contained in a scrollbox. Here's a Plunker which demonstrates this.

However, I'd like to be able to apply this simple directive to DOM elements which are static, calling scope.$apply(attrs.infiniteScroll) when the element nears the bottom of the window's scroll.

Any ideas on how to modify the directive to allow for this? I've tried changing the e.scrollTop to window.scrollTop but to no avail, this is a little beyond my current skill level unfortunately.

I'm trying to work with this AngularJS infinite-scroll directive. Here's the source:

angular.module('infiniteScroll', [])
    .directive('infiniteScroll', [ "$window", function ($window) {
        return {
            link:function (scope, element, attrs) {
                var offset = parseInt(attrs.threshold) || 0;
                var e = element[0];

                element.bind('scroll', function () {
                    if (scope.$eval(attrs.canLoad) && e.scrollTop + e.offsetHeight >= e.scrollHeight - offset) {
                        scope.$apply(attrs.infiniteScroll);
                    }
                });
            }
        };
    }]);

This appears to work only for elements which are contained in a scrollbox. Here's a Plunker which demonstrates this.

However, I'd like to be able to apply this simple directive to DOM elements which are static, calling scope.$apply(attrs.infiniteScroll) when the element nears the bottom of the window's scroll.

Any ideas on how to modify the directive to allow for this? I've tried changing the e.scrollTop to window.scrollTop but to no avail, this is a little beyond my current skill level unfortunately.

• javascript
• html
• angularjs
• angularjs-directive
• infinite-scroll

1 Answer 1

I'm not pletely sure that I got your question right. If you want to have a directive which calls a function, if a certain DOM element es close to the visible area of the whole window, how about a directive like this:

myApp.directive('scrollTrigger', function($window) {
    return {
        link : function(scope, element, attrs) {
            var offset = parseInt(attrs.threshold) || 0;
            var e = jQuery(element[0]);
            var doc = jQuery(document);
            angular.element(document).bind('scroll', function() {
                if (doc.scrollTop() + $window.innerHeight + offset > e.offset().top) {
                    scope.$apply(attrs.scrollTrigger);
                }
            });
        }
    };
});

With this element somewhere below the visible area in your HTML:

<div scroll-trigger="scrollEventCallback()" threshold="100">Trigger element</div>

The function scrollEventCallback() gets called, if it is 100 pixel or less below the currently visible area of the document. Please note, that I used jQuery in this example, so for this to work you will have to include it as well. I hope this is what you asked for.