Как предотвратить прокрутку к началу после обновления асинхроннома в угловых

Question

После запроса асинхронного добавить новый элемент на вершине, как это:

Array.prototype.unshift.apply(scope.conversation, conversation.data.message); 

Проблема в том, что после добавления элемента, положение прокрутки автоматически перемещается Вверх. Как я могу сохранить ту же позицию прокрутки после моего обновления?

Я использую Угловое 1.

Answer 1

Вот пример того, как вычислить scrollTop после добавления объектов в массив.

Логика:

1. Сохранить scrollTop и scrollHeight перед добавлением.
2. Добавить предметы.
3. Установите scrollTop, вычитая дельту высоты (добавив новые предметы) и прокрутите до этой высоты + старый scrollTop.

Имейте в виду, что между добавочными предметами и новым scrollTop есть «прыжок». Я не думаю, что вы можете справиться с этим, если вы не сделаете fadeOut/fadeIn или scrollTo с переходом на этот «прыжок».

Сообщите мне, если что-то непонятное.

angular.module('app', []). 
 
controller('ctrl', function($scope, $timeout) { 
 
    $scope.index = 0; 
 
    $scope.convert = function(arr) { 
 
    for(var i = 0; i < arr.length; i++) { 
 
     arr[i] = $scope.index++; 
 
    } 
 
    
 
    return arr; 
 
    }; 
 
    
 
    $scope.items = $scope.convert(new Array(50)); 
 

 
    $scope.add = function() { 
 
    var $container = $('.container'); 
 
    var container = $container[0]; 
 
    
 
    var scrollTop = $container.scrollTop(); 
 
    var oldHeight = container.scrollHeight; 
 
    Array.prototype.unshift.apply($scope.items, $scope.convert(new Array(50))); 
 
    $timeout(function(){ 
 
     var diff = container.scrollHeight - oldHeight; 
 
     $container.scrollTop(diff + scrollTop); 
 
    }); 
 
    } 
 
});

.container { 
 
    height: 100px; 
 
    overflow-y:scroll; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<div ng-app="app" ng-controller="ctrl"> 
 
    <div class="container"> 
 
    <div ng-repeat="item in items track by $index" class="scroll"> 
 
     Item {{item}} 
 
    </div> 
 
    </div> 
 
    <button ng-click="add()">Add items</button> 
 
</div>