angularjs - 在 AngularJS 中从顶部(反向)无限滚动

Question

我正在尝试做一个反向无限滚动。我有一个评论列表，我在其中收到最近 10 条评论，并希望用户能够向上滚动以检索下 10 条评论 - 类似于 FB，它显示带有“获取上一个”链接的最新评论，但通过滚动事件而不是链接。

我从 http://jsfiddle.net/vojtajina/U7Bz9/ 开始并试图将其修改为反向无限滚动，很快就得到了这样的结果:

  function Main($scope, $timeout) {
    $scope.items = [];

    var counter = 0;
    $scope.loadMore = function() {
      // simulate an ajax request
      $timeout( function() {
        for (var i = 0; i < 5; i++) {
          $scope.items.unshift({id: counter});
          counter += 10;
        }}, 1000);
    };

    $scope.loadMore();
  }

  angular.module('scroll', []).directive('whenScrolled', ['$timeout', function($timeout) {
    return function(scope, elm, attr) {
      var raw = elm[0];

      $timeout(function() {
        raw.scrollTop = raw.scrollHeight;
      }, 1100);

      elm.bind('scroll', function() {
        // note: if test for < 100 get into infinite loop due to 
        // the delayed render
        if (raw.scrollTop === 0) {
          var sh = raw.scrollHeight
          scope.$apply(attr.whenScrolled);
          // the items are not loaded and rendered yet, so
          // this math doesn't work
          raw.scrollTop = raw.scrollHeight - sh;
        }
      });
    };
  }]);
  ​

http://jsfiddle.net/digger69/FwWqb/2/

问题在于，当检索到接下来的 10 个项目时，它们会被添加到列表的顶部，整个列表会重新呈现，而位于列表顶部的项目会完全滚出 View 。在 fiddle 项目“40”位于顶部，当您滚动(稍微向下)然后向上滚动以触发滚动时，项目“90”位于顶部。我正在寻找一个很好的策略，在渲染后将“40”保持在滚动区域的顶部。

注意:在 fiddle 中，我能够通过保存滚动事件中的顶部 li 并调用 scrollIntoView() 来让它工作，直到我添加超时来模拟 ajax 调用。随着超时，顶部 li 在请求返回并呈现新元素之前滚动到 View 中:/

var top = elm.find("li")[0];
scope.$apply(attr.whenScrolled);
top.scrollIntoView();

Answer 1

您可以尝试这样的操作:http://jsfiddle.net/mNFmf/4/

这将滚动到 div 的底部:

$timeout(function() {
    raw.scrollTop = raw.scrollHeight;          
});    

这将防止 div 向上滚动到列表中的第一项:

var sh = raw.scrollHeight
scope.$apply(attr.whenScrolled);
raw.scrollTop = raw.scrollHeight - sh;

更新

解决ajax请求问题，尝试使用 promises .

http://jsfiddle.net/mNFmf/8/

加载器看起来像这样:

$scope.loadMore = function() {
  var deferred = $q.defer();

  // do ajax request here and after getting the result call:   
  deferred.resolve();

  return deferred.promise;
};

而在另一边:

loadMore.then(function() { 
  /* do whatever you want after the ajax request has been fulfilled */ 
});