將內容預先加入列表時保持滾動位置（AngularJS）

我一直試圖通過使用ng-repeat將一些項目添加到可滾動容器內的列表中，而最近的應該位於列表頂部。如果容器的滾動條不在最前面時，我還需要保持滾動位置。將內容預先加入列表時保持滾動位置（AngularJS）

這是我的解決方案，但我仍然有一個問題。在角度渲染前綴項目後，總會有閃爍現象。

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>

來源

2015-09-10 micmia

我發現this post，改變$timeout至$scope.$$postDigest。現在它按預期工作。

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>

來源

2015-09-10 14:29:31 micmia

將內容預先加入列表時保持滾動位置（AngularJS）

回答

相關問題