Skip to content

Instantly share code, notes, and snippets.

@WuglyakBolgoink
Created May 14, 2021 18:44
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save WuglyakBolgoink/912adf8777bbb7e84fa4b8528f351b97 to your computer and use it in GitHub Desktop.
Save WuglyakBolgoink/912adf8777bbb7e84fa4b8528f351b97 to your computer and use it in GitHub Desktop.
Angularjs infiniteScroll directive
<!-- displayLimit:number - how much element pro chunk should be show -->
<!-- displayMoreItems() - will be triggered if user scrollet until end of last chunk element-->
<ul infinite-scroll="$ctrl.displayMoreItems()">
<li data-ng-repeat="item in $ctrl.filteredItems | limitTo: $ctrl.displayLimit track by $index">
...
</li>
</ul>
'use strict';
/**
* @see http://www.williambrownstreet.net/blog/2013/07/angularjs-my-solution-to-the-ng-repeat-performance-problem/
*/
angular
.module('app.shared.directives')
.directive('infiniteScroll', InfiniteScrollDirective);
/**
* @ngInject
*/
function InfiniteScrollDirective($rootScope, $timeout, $window) {
return {
restrict: 'A',
link: _linkFunction
};
/**
* @ngInject
*/
function _linkFunction(scope, elem, attrs) {
// @see https://github.com/jquery/jquery-ui/blob/master/ui/core.js - scrollParent
var findScrollParent = function(elem) {
var position = elem.css('position'),
excludeStaticParent = position === 'absolute',
overflowRegex = /(auto|scroll)/,
scrollParent = elem.parents().filter(function() {
var parent = $(this);
if (excludeStaticParent && parent.css('position') === 'static') {
return false;
}
return overflowRegex.test(parent.css('overflow') + parent.css('overflow-y') + parent.css('overflow-x'));
}).eq(0);
if (position === 'fixed' || !scrollParent.length || scrollParent.prop('tagName') === 'BODY') {
return angular.element($window);
} else {
return scrollParent;
}
};
var scrollParent = findScrollParent(elem);
// Apply function given in infinite-scroll
var on_scroll = function() {
var scrollParentBottom;
if ($.isWindow(scrollParent[0])) {
scrollParentBottom = scrollParent.height() + scrollParent.scrollTop();
} else {
scrollParentBottom = scrollParent.height() + scrollParent.offset().top;
}
var elemBottom = elem.offset().top + elem.height();
// One scrollParent.height() as a buffer
if (scrollParentBottom >= elemBottom - scrollParent.height()) {
if ($rootScope.$$phase) {
return scope.$eval(attrs.infiniteScroll);
} else {
return scope.$apply(attrs.infiniteScroll);
}
}
};
// Register scroll handler
scrollParent.on('scroll touchmove', on_scroll);
// Unregister scroll handler
scope.$on('$destroy', function() {
return scrollParent.off('scroll touchmove', on_scroll);
});
// Execute once initially
return $timeout((function() {
return on_scroll();
}), 0);
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment