从AngularJS顶部（反向）无限滚动 [英] infinite scroll from the top (reverse) in AngularJS

问题描述

我试图做一个反向无限滚动。我有，我收到的最后10个最近的意见和希望用户能够滚动评论列表的最多的检索下一个10 - 类似于FB里它显示了最新的意见获得previous链接，而是通过滚动事件，而不是一个链接。

我开始与 http://jsfiddle.net/vojtajina/U7Bz9/ 并试图将其修改为一个反向无限滚动和pretty很快结束了这样的事情：

 函数main（$范围，$超时）{
    $ scope.items = [];    变种计数器= 0;
    $ scope.loadMore =功能（）{
      //模拟一个Ajax请求
      $超时（函数（）{
        为（变量I = 0; I＆小于5;我++）{
          $ scope.items.unshift（{ID：计数器}）;
          计数器+ = 10;
        }}，1000）;
    };    $ scope.loadMore（）;
  }  angular.module（滚动，[]）。指令（whenScrolled'，['$超时'，函数（$超时）{
    返回功能（范围，榆树，ATTR）{
      变种原料=榆树[0];      $超时（函数（）{
        raw.scrollTop = raw.scrollHeight;
      }，1100）;      elm.bind（'滚动'，函数（）{
        //注意：如果测试＆LT; 100进入无限循环，由于
        //延迟渲染
        如果（raw.scrollTop === 0）{
          VAR SH = raw.scrollHeight
          。范围$申请（attr.whenScrolled）;
          //项目不​​会被加载并尚未呈现，所以
          //这个数学不起作用
          raw.scrollTop = raw.scrollHeight  -  SH;
        }
      }）;
    };
  }]）;
  
 

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

的问题是，当检索到的下一个10个项目，它们被添加到列表的顶部，整个列表重新呈现，这是在该列表中被完全滚出视的项目。在拨弄项目40是在顶部，当你滚动（略有下降），然后到触发滚动，项目90后是在顶部。我在寻找一个很好的策略，以保持40在滚动区域的顶部已经呈现了。

请注意：在拨弄我能够得到它通过保存关闭顶部李毅中滚动事件，并呼吁scrollIntoView工作（）的直到的我加的超时模拟Ajax调用。随着超时顶立滚动到视图请求已经回来之前，新元素会呈现：/

  VAR顶部= elm.find（礼）[0];
            。范围$申请（attr.whenScrolled）;
            top.scrollIntoView（）;
 

解决方案

您可以尝试这样的事情： http://jsfiddle.net / mNFmf / 4 /

这将滚动到div的底部：

  $超时（函数（）{
    raw.scrollTop = raw.scrollHeight;
}）;
 

这将保持股利从列表中滚动到第一个项目：

  VAR SH = raw.scrollHeight
。范围$申请（attr.whenScrolled）;
raw.scrollTop = raw.scrollHeight  -  SH;
 

---

更新

要克服Ajax请求的问题，请尝试使用承诺。

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

装载机会是这个样子：

  $ scope.loadMore =功能（）{
  变种推迟= $ q.defer（）;  //做Ajax请求，并在这里获得的结果调用后：
  deferred.resolve（）;  返回deferred.promise;
};
 

和在另一侧

  loadMore.then（函数（）{
  / *做任何你想做的AJAX请求完成后，* /
}）;
 

I am trying to do a reverse infinite scroll. I have a comment list where I receive the last 10 most recent comments and want the user to be able to scroll up to retrieve the next 10 - similar to FB where it shows the most recent comments with a 'get previous' link, but via scroll event rather than a link.

I started with http://jsfiddle.net/vojtajina/U7Bz9/ and tried to modify it to a reverse infinite scroll and pretty quickly ended up with something like this:

  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/

The issue is that when the next 10 items are retrieved, they are added to the top of the list and the entire list re-renders, and the item that was at the of the list is completely scrolled out of view. In the fiddle item "40" is at the top and when you scroll (down slightly) and then up to trigger the scrolled, item "90" is at the top. I'm looking for a good strategy to keep "40" at the top of the scroll area after it has rendered.

Note: In the fiddle I was able to get it to work by saving off the top li in the scroll event and calling scrollIntoView() until I added the timeout to simulate the ajax call. With the timeout the top li is scrolled into view before the request has come back and the new elements are rendered :/

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

解决方案

You can try something like this: http://jsfiddle.net/mNFmf/4/

This will scroll to the bottom of the div:

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

And this will keep the div from scrolling up to the first item on the list:

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

---

Update

To overcome the ajax request problem, try to use promises.

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

The loader would look something like this:

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

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

  return deferred.promise;
};

And on the other side:

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

这篇关于从AngularJS顶部（反向）无限滚动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！