如何防止滚动的角度

Question

异步更新异步请求后后到顶部我在上面添加了新的元素是这样的：

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

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

我使用角1.

Answer 1

下面是如何将对象添加到阵列后计算scrollTop的样品。

的逻辑是：

1. 保存scrollTop并添加之前scrollHeight。
2. 添加项目。
3. 由calc下高度的增量设置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>