javascript - 在具有扩展隐藏内容的表中保持 View 不变

Question

我有一些动态填充表的数据。

表格位于一个 div 中，具有 overflow: scroll 和 height 属性集。

这里需要注意的是数据是从顶部填充的。

对于我的具体情况，当我在 #container div 中滚动时，您无法跟踪特定的数据行，因为它移出了可用的 View 空间。实际上，这些数据会复杂得多，并且以随机速率填充(它实际上是实时聊天数据的聚合)。

我的目标是在表格内自由滚动时能够保持内容静止。

该应用程序已经很复杂，因此最好使用任何原生 CSS 方法来促进这一点。

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;
}

Answer 1

html

<div ng-controller="MyCtrl">
    <div style="height: 200px;overflow-y:scroll;background-color:#ccc;"id='container'>

        <table>
            <thead>
                <tr>
                    <th>Index</th>
                    <th>Data</th>
                </tr>
            </thead>
            <tbody>
                <tr ng-repeat="element in data">
                    <td>{{element}}</td>
                </tr>
            </tbody>
        </table>

    </div>
</div>

脚本

var myApp = angular.module('myApp',[]);


function MyCtrl($scope, $interval) {
    $scope.name = 'Superhero';
    $scope.data = [];

    var c = 0;
    $interval(function(){
        $scope.data.unshift(c);
        c++;
        fixScroll();
    }, 500);
    fixScroll();
}

var oldheight = document.getElementById('container').scrollHeight;
function fixScroll(){
    var newheight = document.getElementById('container').scrollHeight;
    var newAddition = newheight - oldheight;
    document.getElementById('container').scrollTop = document.getElementById('container').scrollTop + newAddition;
    oldheight = document.getElementById('container').scrollHeight;
}

工作 fiddle :https://jsfiddle.net/rdkha9jk/

您可能想要编写一些 bool 值，以便在滚动处于滚动最大值和最小值时不进行调整。你会明白我的意思。否则，让它填满内容，我认为它按要求工作。