无限滚动导致快速滚动时跳转到屏幕顶部

Question

我在我的网站上使用 ng-infinite-scroll Angular 指令，它总体上运行良好。但是，在测试时我注意到如果我快速滚动页面会跳回到顶部。下面是我的 html 和我的滚动功能。我认为问题在于 $scope.busy 的处理方式：

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>

控制器代码：

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

Answer 1

要非常小心你的样式表...我在 DOM 上有一个 css class 来防止显示没有加载图片的项目，这个 css class 在图像加载后被删除。然而，ng-infinite-scroll 将 ng-repeat DOM 替换为原始默认 HTML 模板（以及 CSS classes！），因此 css class 导致该项目的高度基本上为零。这当然迫使我到页面顶部。

Answer 2

我成功地将父元素上的 min-height 设置为具有无限滚动的元素的当前高度，如下所示：

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

与 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

javascript

infinite-scroll

angularjs

nginfinitescroll