Javascript 获取滚动结束事件angularjs（一旦滚动停止）

我无法获得滚动事件angularjs的结尾，爱奥尼亚，最糟糕的是，它在浏览器中工作正常，但在android和iOS设备中工作不正常

这是我的代码笔链接：

HTML:

atNewProduct函数将执行多次，直到滚动结束。有人能建议我如何获取滚动结束事件并获取屏幕上显示的特定项目的索引吗

此外，我收到一条错误消息，说touch.webkitRaidusX已被弃用，将于2015年11月左右在M47中删除

 <ion-content overflow-scroll="true" has-bouncing='false'>
 <ion-list>      
       <div class="card" collection-repeat="product in products" scroll="atNewProduct($index)" scroll-item="atNewProduct($index)" scrollable>

        <div class='row'>
          <div class="col col-25">
            <img src={{product.ImagePath}}style="width:70px;height:70px"></img>
          </div>

         </div>

        </div>
        </div>
    </ion-list>
</ion-content>

var starter = angular.module('starter', ['ionic']);

starter.directive('scroll', function ($parse, $document, $window) {
var _ = $window._;
var verge = $window.verge;
var visibleElements = [];
// alert(JSON.stringify(verge) + '\n' + _ + '\n' + visibleElements[0]);
return {
    restrict: 'A',
    priority: -1,
    scope: {
        scroll: '&',
        scrollItem: '='
    },
    link: function (scope, element, attrs) {

        var debounced = _.debounce(function() {

            // You might need a different test,
            // perhaps including the height of the element,
            // or using verge "rectangle" function
            var visible = verge.inViewport(element);

            var index = visibleElements.indexOf(scope.scrollItem);
            var previouslyVisible = (index != -1);
            if (visible && !previouslyVisible) {
                visibleElements.push(scope.scrollItem);
                scope.$apply(function() {
                  scope.scroll({item:scope.scrollItem});
                });
            }
            if (!visible && previouslyVisible) {

              visibleElements.splice(index, 1);
            }
        }, 1000);
        angular.element($document).on('scroll', debounced);
        if (verge.inViewport(element)) {
            visibleElements.push(element);
        }

    }
};
});

 starter.directive('scrollable', ['$document', '$window', function ($document, $window ) { 
return {
link: function (scope, element, attrs) {
    angular.element($document).bind('scroll', function() { //i guess the problem is with this line
        console.log("scrollable-------------");
        // detect if scroll has stop and execute a function  
        clearTimeout( $.data( this, "scrollCheck" ) );
            $.data( this, "scrollCheck", setTimeout(function() {
                alert("Stopped");
            }, 250) );   
    });
}
};
}])

starter.controller('plpCntrl',function($scope) {
  $scope.atNewProduct = function(item) {
  console.log(item);//able to get the index of ng-repeater present in the screen
}
 });