5
Próbowałem dodać kilka elementów do listy w przewijanym pojemniku za pomocą ng-repeat, a ostatnia powinna znajdować się na początku listy. Muszę również zachować pozycję przewijania, jeśli pasek przewijania kontenera nie znajduje się na samym szczycie podczas dodawania treści.Utrzymywanie pozycji przewijania podczas dodawania zawartości do listy (AngularJS)
Oto moje rozwiązanie, ale nadal mam problem. Zawsze jest migotanie po tym, jak kątowe wyrenderował elementy z góry w dom.
var myApp = angular.module('myApp', []);
myApp.controller('MainCtrl', function($scope, $interval, $timeout) {
$scope.items = [];
$interval(function() {
var item = {
id: Math.random(),
text: (new Date()).toString()
};
$scope.items.unshift.apply($scope.items, [item]);
var $container = $('.stream-container');
var $topItem = $('.item:first');
var oScrollTop = $container.scrollTop();
var oOffset = $topItem.length ? $topItem.position().top : 0;
$timeout(function() {
// Executed after the dom has finished rendering
if ($container.scrollTop() !== 0) {
$container.scrollTop(oScrollTop + ($topItem.length ? $topItem.position().top : 0) - oOffset);
}
});
}, 1000);
});.stream-container {
overflow-y: scroll;
overflow-x: none;
height: 100px;
position: relative;
}<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<body ng-app="myApp">
<div class="stream-container" ng-controller="MainCtrl">
<div class="stream">
<div class="item" ng-repeat="item in items track by item.id">{{ item.text }}</div>
</div>
</div>
</body>