Question

在异步请求之后，我在这里添加一个新元素：

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

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

我正在使用Angular 1。

Answer 1

以下是在向数组添加对象后如何计算scrollTop的示例。

逻辑是：

在添加之前保存scrollTop和scrollHeight。
添加项目。
通过计算高度的增量（通过添加新项目）设置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>

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

1 个答案: