Próbuję zrobić odwrotny nieskończony zwój. Mam listę komentarzy, na której otrzymuję ostatnie 10 ostatnich komentarzy i chcę, aby użytkownik mógł przewijaćw górę aby pobrać następne 10 - podobne do FB, gdzie pokazuje najnowsze komentarze za pomocą linku „pobierz poprzedni”, ale za pomocą zdarzenia przewijania, a nie łącza.

Zacząłem odhttp://jsfiddle.net/vojtajina/U7Bz9/ i próbowałem go zmodyfikować do odwrotnego nieskończonego zwoju i dość szybko skończyło się na czymś takim:

  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/

Problem polega na tym, że po pobraniu kolejnych 10 elementów są one dodawane na górę listy, a cała lista jest ponownie renderowana, a element znajdujący się na liście jest całkowicie przewijany z widoku. W skrzypcowym elemencie „40” znajduje się na górze, a gdy przewijasz (lekko w dół), a następnie w górę, aby wywołać przewijany element, „90” znajduje się na górze. Szukam dobrej strategii, aby zachować „40” na górze obszaru przewijania po jego renderowaniu.

Uwaga: W skrzydle udało mi się go uruchomić, zapisując top li w zdarzeniu scroll i wywołując scrollIntoView ()aż do Dodałem limit czasu, aby symulować wywołanie ajax. Po przekroczeniu limitu czasu top li jest przewijany przed wyświetleniem żądania i renderowaniem nowych elementów: /

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