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

我在我的网站上使用了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; 
    }); 
}

来源

2015-02-05 MattDionis

如果您可以提供一个plnkr .co/jsfiddler演示，帮助调试会更容易。 – Rebornix

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

来源

2015-03-16 14:45:40 user3338098

在我的情况下，我有ng-show =“visible”的子元素，切换到ng-if =“visible”修复了这个问题。 – Felix

我有成功的父元素上设置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>

来源

2016-12-19 16:01:13

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

回答

相关问题