在具有扩展隐藏内容的表中保持视图不变

Question

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

该表位于设置了overflow: scroll和height属性的div中。

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

对于我的具体情况是，当我在#container div中滚动时，当它移出可用的视图空间时，您无法跟踪特定的数据行。实际上，这些数据将更复杂，并且以随机速率填充（它实际上是实时聊天数据的聚合）。

我的目标是在桌子内自由滚动时能够保持内容不变。

该应用程序已经非常复杂，因此任何原生的CSS方式都可以提供便利。

小提琴：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;
}

工作小提琴：https://jsfiddle.net/rdkha9jk/

你可能希望编写一些布尔值，当滚动位于滚动最大值和最小值时不进行调整。你会明白我的意思。否则，让它填满内容，我认为它按照要求工作。

Answer 2

我无法使用CSS方法，但是（除非我完全误解了这个问题）JavaScript应该相当简单。实际上应该有几种方法可以做到这一点。

最简单的可能就是调用＆＃34; element.scrollIntoView（）＆＃34;在新创建的元素上。

我在这里修改了你的小提琴：https://jsfiddle.net/HB7LU/12103/

JS

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

//Added this function to search your table for the last child element and scroll to it.
function scrollToElement() {
  //Get the last element of this table and scroll it to the bottom of its container.
  if (document.getElementById('test').lastElementChild != null) {
    document.getElementById('test').lastElementChild.scrollIntoView(false);
    //false scrolls the bottom to the bottom. true scrolls top to top.
  }   
}

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

    var c = 0;
    $interval(function(){
        $scope.data.push(c);
        c++;

        //Need to wait for Angular to do its thing...
        window.setTimeout(scrollToElement, 0);
    }, 500);
}

HTML

<div ng-controller="MyCtrl">
    <div id='container'>
        <table>
            <thead>
                <tr>
                    <th>Index</th>
                    <th>Data</th>
                </tr>
            </thead>
            <!-- I added an id to the below element to find it -->
            <tbody id="test">
                <tr ng-repeat="element in data">
                    <td>{{element}}</td>
                </tr>
            </tbody>
        </table>
    </div>
</div>