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の項目である場合ということです検索されたものはリストの先頭に追加され、リスト全体が再レンダリングされ、リストのアイテムが完全に表示されなくなります。フィドルアイテムでは、「40」が上部に表示され、スクロール（わずかに下）してからスクロールすると、「90」が上部に表示されます。私はスクロール領域の上部に "40"を残しておくと良い戦略を探しています。

注：スクロールイベントで一番上のliを​​オフにして、scrollIntoView（）を呼び出すことで動作させることができましたまでajax呼び出しをシミュレートするタイムアウトを追加しました。リクエストが戻ってきたし、新しい要素がレンダリングされる前にタイムアウトを持つトップLiはビューにスクロールさ：これは、の一番下までスクロールしますhttp://jsfiddle.net/mNFmf/4/

：/

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

Answer 1

をあなたはこのような何かを試すことができますDIV：

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

そして、これは、リスト上の最初の項目までスクロールからのdivを維持します：

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

---

更新

promisesを使用しようと、AJAXリクエストの問題を克服するために。

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

Answer 2

あなたはこれを解決しましたか？我々はscrollTopを読んで魔法をかけているが、SafariはscrollTopの設定と読書に関して奇妙なタイミング問題を抱えているということを発見した。