当div在屏幕底部的(x)像素内滚动时,AngularJS调用函数

Question

我正在尝试使用此AngularJS infinite-scroll指令.这是来源:

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);
                    }
                });
            }
        };
    }]);

这似乎仅适用于滚动框中包含的元素.这是一个演示这个的Plunker.

但是,我希望能够将这个简单的指令应用于静态的DOM元素,scope.$apply(attrs.infiniteScroll)当元素接近窗口滚动的底部时调用.

关于如何修改指令以允许这个的任何想法？我试图改变e.scrollTop到window.scrollTop,但无济于事,这有点超出了我目前的技术水平很遗憾.

Answer 1

我不完全确定我的问题是对的.如果你想要一个调用函数的指令,如果某个DOM元素接近整个窗口的可见区域,那么这样的指令如何:

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

将此元素放在HTML中可见区域下方的某处:

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

如果函数scrollEventCallback()在文档的当前可见区域下方100像素或更少,则调用该函数.请注意,我在这个例子中使用了jQuery,因此要使用它,你也必须包含它.我希望这就是你要求的.