How to know if some content is in visible area of a div which has a scrollbar? jQuery

Question

I have a table with rows. The table is in a div. The table has a bigger height than the div and therefore the div has a vertical scrollbar and some rows of the table are in the invisible area of the div. All good.

Then through JavaScript I am searching for some text which tells me which row it is in. If that row is not visible, I want to scroll the div to show that row.

How can I determine if that row is in the visible or hidden portion of the div? I can probably get it from doing height calculations but was wondering if there's a simpler method.

Answer 1

There is a DOM method called .scrollIntoView() which does exactly what you describe. Here's how to use it:

var tr = document.getElementById("myRow");
tr.scrollIntoView();

The method has an optional alignWithTop argument which not only ensures that the element is visisble, but also places the element is at the top of the scrolling viewport (much like clicking on an anchor, as Shadow Wizard suggests in his comment)