如何查询溢出隐藏区域中的元素：滚动

Question

是否可以查询位于具有overflow:scroll 的父元素的“隐藏区域”中的所有对象？

有一个父容器<div>style="overflow:scroll;height:200px"。此容器包含一个表。查看示例代码：

<div id="scrollContainer" style="overflow:hidden;height:200px">
    <table>
        <tr>
            <td>...</td>
        <tr>
        <tr>
            <td>...</td>
        <tr>
        ...
        ...
    </table>
</div>

如何获得所有不在视野范围内的<tr>的列表？

Answer 1

第一个问题：

是的。 JS 不太关心元素是否可见，它关心元素是否在 DOM 中。

所以，document.getElementsByTagName('tr'); 将返回 all <tr>s，无论它们当前是否在屏幕上可见。

第二个问题（？）：

如果重点是选择特定时刻在屏幕上可见（或不可见）的元素，您可以使用.getBoundingClientRect();，如here 所述。

或者，如果您确实非常关心这些元素的可见性并经常检查它，那么制作类似于轮播或其他“受控”元素的东西可能是一个更好的主意。

通过这种方式，您将能够跟踪其状态并准确了解每个元素的可见性。