特定viewpart中可见表行的数量

Question

我在确定某个行是否在视图部分中完全可见时遇到问题。

我创建了一个虚拟表，如下所述： -

<table id="alarmTable">
    <tr>
    <td>
        Hello
    <td>
    </tr>
    <tr>
    <td>
        Hello
    <td>
    </tr>
    <tr>
    <td>
        Hello
    <td>
    </tr>
    <tr>
    <td>
        Hello
    <td>
    </tr>
    <!-- with more data in the table -->
</table>

我想确定表格行是否在视图部分中可见。假设我的表有50行，当前在浏览器窗口或其中的一小部分可见。

案例1： - 如果我将行数增加到50以上，滚动条将自动生效，但可见数仍应为50.我想要一些可以处理实际可见行的代码返回表中的行是否可见。

案例2： - 如果我重新调整浏览器窗口的大小，我的视图部分会调整大小。这次可见行的数量甚至可以小于50.我如何处理这种情况并检查行是否仍然是可见的。

到目前为止的方法： - 我尝试了很多东西，包括以下代码片段： -

var visibleRows = $('#alarmTable tr:visible').length;
console.log("visible rows =" + visibleRows);
console.log("scroll height ="+ document.getElementById("alarmTable").scrollHeight);
console.log("client height ="+ document.getElementById("alarmTable").clientHeight);
console.log("offset height ="+ document.getElementById("alarmTable").offsetHeight);

但他们没有给我正确的参数。

注意： - 上面创建的表只是一个虚拟表，可以更好地理解我的问题。

返回可见行的行id的代码或返回行是否可见的代码将被接受为正确答案。

Answer 1

以下是根据元素在视口中是否可见来过滤元素的方法

$(window).on('scroll resize', function() {

    var top    = $(this).scrollTop(),
        height = $(this).height();


    var visible = $('#alarmTable tr').filter(function() {
        var elTop    = $(this).offset().top,
            elHeight = $(this).height();

        return (elTop > top) && ((elTop + elHeight) < (top + height));
    });

});

FIDDLE