Menu
I've been trying to prepend some items to a list within a scrollable container by using ng-repeat, and the recent one should be at the top of the list. I also need to maintain the scroll position if the scroll bar of the container is not at the very top when prepending content.
Here is my solution, but I still have a problem. There is always a flickering after angular has rendered prepended items in 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>
302
I found this post and changed $timeout to $scope.$$postDigest. Now it works as expected.
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;
$scope.$$postDigest(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>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With