如何防止滾動的角度

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>