5
Tôi đã cố gắng thêm một số mục vào danh sách trong vùng chứa có thể cuộn bằng cách sử dụng ng-repeat và mục gần đây phải ở đầu danh sách. Tôi cũng cần duy trì vị trí cuộn nếu thanh cuộn của vùng chứa không ở trên cùng khi nội dung đang chờ xử lý.Duy trì vị trí cuộn khi thêm nội dung vào danh sách (AngularJS)
Đây là giải pháp của tôi, nhưng tôi vẫn gặp sự cố. Luôn luôn có một nhấp nháy sau khi góc đã trả lại các mục được thêm vào trong 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>