My table is dynamically populated with data within a div that has overflow: scroll and height set properties. The issue I face is that the data populates from the top, making it difficult to keep track of specific rows when scrolling within the #container div. In my case, the data being populated is quite complex and at random rates (it's live chat data aggregation).
I am looking for a way to keep the content static while freely scrolling through the table. Given that the app is already quite intricate, I would prefer any native CSS solutions to address this challenge.
Fiddle: https://jsfiddle.net/iamyojimbo/HB7LU/12102/
JS
var myApp = angular.module('myApp',[]);
function MyCtrl($scope, $interval) {
$scope.data = [];
var c = 0;
$interval(function(){
$scope.data.push({value:c});
c++;
}, 150);
}
HTML
<h1>Data</h1>
<div ng-controller="MyCtrl">
<div id='container'>
<table>
<tbody>
<tr ng-repeat="element in data | orderBy : '-value'">
<td>{{element.value}}</td>
</tr>
</tbody>
</table>
</div>
</div>
CSS
#container {
height: 295px;
overflow:scroll;
}