How to query elements that are in the hidden area of overflow:scroll

Question

Is it possible to query all objects that are in the "hidden area" of a parent element that has a overflow:scroll?

There is a parent <div> container with style="overflow:scroll;height:200px". This container contains a table. See the sample code:

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

How can I get a list of all <tr>that are out of view?

Answer 1

1st question:

Yes it's. JS doesn't care that much if an element is visible or not, it cares if the element is in the DOM.

So, document.getElementsByTagName('tr'); will return all <tr>s whether they are currently visible on the screen or not.

2nd question (?):

If the point is to select particularly the elements that are visible (or not) on the screen in this particular moment, you can use .getBoundingClientRect(); as described here.

Alternatively, if you do care a lot about visibility of these elements & going to check it frequently, It could be a better idea to make something similar to carousel or other "controlled" element.

This way you will be able to keep track of its state & know precisely visibility of each element.