AngularJS의 맨 위 (역방향)에서 무한 스크롤

Question

역의 무한 스크롤을 수행하려고합니다. 나는 최근 10 개의 최근 코멘트를받은 코멘트 목록을 가지고 있으며 사용자가 스크롤 할 수 있도록 위로 다음 10 개를 검색 - FB와 유사한 'get previous'링크가있는 가장 최근 코멘트를 표시하며, 링크가 아닌 스크롤 이벤트를 통해 전달됩니다.

나는 http://jsfiddle.net/vojtajina/U7Bz9/ 시작 및 역방향 무한 스크롤로 수정 시도하고 꽤 빨리 이런 일에 끝났다 :이 문제는 다음 10 개 항목이있는 경우이다

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/

검색된 항목은 목록의 맨 위에 추가되고 전체 목록이 다시 렌더링되고 목록의 항목은보기 밖으로 완전히 스크롤됩니다. 바이올린 항목에서 "40"이 맨 위에 있고 스크롤 (아래로 약간) 한 다음 위로 스크롤하면 항목 "90"이 맨 위에 표시됩니다. 스크롤 영역의 맨 위에 "40"을 유지하는 좋은 전략을 찾고 있습니다.

참고 : 필자는 스크롤 이벤트에서 최상위 li을 저장하고 scrollIntoView()를 으로 호출하여 작동하도록했습니다. ajax 호출을 시뮬레이트하기 위해 시간 제한을 추가했습니다. 시간 초과로 요청이 돌아올 전에 상단 리보기로 스크롤하고 새로운 요소가 렌더링 : http://jsfiddle.net/mNFmf/4/

이 하단으로 스크롤합니다 :/

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

Answer 1

당신은 이런 식으로 뭔가를 시도 할 수 있습니다 사업부 :

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

그리고이 목록의 첫 번째 항목까지 스크롤에서 사업부를 유지합니다 :

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

01 23,516,

---

업데이트

아약스 요청 문제를 해결하려면, promises를 사용하려고합니다.

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

Answer 2

혹시이 문제를 해결 했

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

로더는 다음과 같이 보일 것인가? 우리는 scrollTop을 읽음으로써 약간의 마술을하고 있지만, Safari는 scrollTop을 설정하고 읽음으로써 타이밍에 문제가 있다는 것을 알았습니다. 위치로 스크롤 한 다음 새 위치를 쿼리하면 Safari는 여전히 이전 위치를 유지합니다.