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

Question

在异步请求之后，我在顶部添加一个新元素，如下所示:

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

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

我正在使用 Angular 1。

Answer 1

以下示例演示了如何在将对象添加到数组后计算 scrollTop。

逻辑是:

1. 添加前保存 scrollTop 和 scrollHeight。
2. 添加项目。
3. 通过计算高度增量(通过添加新项目)来设置 scrollTop，并滚动到此高度 + 旧的 scrollTop。

请记住，添加项和新的 scrollTop 之间存在“跳转”。我认为你无法克服它，除非你做一些 fadeOut/fadeIn 或带有过渡的滚动来覆盖这个“跳跃”。

如果有不清楚的地方，请告诉我。

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>