在Angular中异步更新后，如何防止滚动到顶部

Question

在异步请求之后，我在这样的顶部添加了一个新元素：

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

问题在于，添加元素后，滚动位置会自动移动到顶部。更新后如何保持相同的滚动位置？

我使用的是Angular1。

Answer 1

这是如何在将对象添加到数组后如何计算scrollTop的示例。

逻辑是：

1. 在添加之前保存scrollTop和scrollHeight。
2. 添加项目。
3. 通过计算设置scrollTop高度的增量（通过添加新项目）并滚动到此高度 旧scrollTop。

请注意到添加项目与新的scrollTop之间存在"跳跃"。我认为除非您做一些淡入淡出/淡淡的淡出或过渡以覆盖此"跳跃"。

让我知道是否不清楚。

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>