Currently, I am implementing an infinite scroll feature using ng-repeat and adjusting the limitTo value through a loadMore() function.
Below is the code snippet for the directive (discovered on a jsfiddle):
angular.module('scroll', []).directive('whenScrolled', function() {
return function(scope, elm, attr) {
var raw = elm[0];
elm.bind('scroll', function() {
if (raw.scrollTop + raw.offsetHeight >= raw.scrollHeight) {
scope.$apply(attr.whenScrolled);
}
});
};
});
The controller contains the following code:
var nb = 15;
$rootScope.vue = nb;
$rootScope.loadMore = function() {
$rootScope.vue = $rootScope.vue + 5;
}
This is how it looks in the HTML:
<div class="container-fluid" id="full-2">
<div class="row" id="full-3">
<div class="col-xs-12 col-md-10" id="fixed" when-scrolled="loadMore()">
<ul>
<li ng-repeat="pg in eleves0 | search:query:['millesime']:operator | orderBy:orderProp | limitTo:vue">
[...]
</li>
</ul>
</div>
</div>
Additionally, here is the CSS styling being used:
html, body{
background-color:#ccc;
height:100%;
}
#full{
height:100%;
}
#full-1{
height:90%;
}
#full-2{
height:100%;
}
#full-3{
height:100%;
}
#fixed{
height:100%;
overflow: auto;
}
This implementation functions smoothly on IE, Firefox, and Opera, where scrolling down reveals new content. However, it encounters issues on Chrome, particularly in full-screen mode or when the window's height exceeds a certain threshold (~300-500 px).
If you have any insights on the possible reasons behind this issue or solutions to resolve it, they would be greatly appreciated.