Infinite Scroll causes jump to top of screen on fast scrolling

Question

I'm using the ng-infinite-scroll Angular directive on my site and it works well overall. However, while testing I noticed if I scroll quickly the page jumps back up toward the top. Below is my html and my scrolling function. I believe the issue lies with how $scope.busy is handled:

html:

<div class="row inner" infinite-scroll="loadImages()" infinite-scroll-distance="1" infinite-scroll-disabled="busy">

  <h2 class="headline">{{event}}</h2>
  <h3 class="headline">{{city}}, {{state}}</h3>

  <div class="col-md-3 col-sm-4 col-xs-12 img-container" ng-repeat="photo in photos">

    <a ng-href="{{photo.link}}" target="_blank" title="{{photo.text}}"><img ng-src="{{photo.img}}" onerror="imgError(this);" alt="" class="img-responsive insta" id="image"></a>

    <div class="prof-circ" title="{{photo.username}}"><a ng-href="http://instagram.com/{{photo.username}}" target="_blank"><img ng-src="{{photo.profile}}" onerror="anonImg(this);" alt="" class="circular"></a></div>

</div>

controller code:

$scope.loadImages = function() {

    if ($scope.busy) return;
    $scope.busy = true;
    $scope.limit += 20;

    Events.get($scope.id,$scope.limit).success(function(response) {
        $scope.photos = response.photos.reverse();
        $scope.busy = false;
    });
}

If you can provide a plnkr.co/jsfiddler demo, it would be easier to help debug. — Rebornix, Feb 05 '15 at 02:11

score 5 · Accepted Answer · answered Mar 16 '15 at 14:45

5

Be very careful with your style sheets... I had a css class on the DOM to prevent displaying items that didn't have there picture loaded, this css class was removed after the image loaded. However ng-infinite-scroll replaces the ng-repeat DOM with the original default HTML template (and CSS classes!) and so for a split second the css class caused the item to have essentially zero height. This of course forced me to the top of the page.

answered Mar 16 '15 at 14:45

user3338098

845
1
13
33

In my case I had sub element with ng-show="visible", switch to ng-if="visible" fixed the issue. – Felix Jan 20 '16 at 08:06

score 0 · Answer 2 · answered Dec 19 '16 at 16:01

I had success setting min-height on the parent element to the current height of the element with the infinite-scroll like so:

$scope.show_more_results = function() {
  $("#my-results-parent").css("min-height", function(){
    return $("#my-results").height();
  });
  // other code loading results here
};

with html:

<div id="#my-results-parent">
  <div id="#my-results" infinite-scroll="show_more_results()">
  </div>
</div>

Infinite Scroll causes jump to top of screen on fast scrolling

2 Answers2