CSS overflow table row positioning
-
09-06-2019 - |
Question
I have table inside a div tab. The table has 40 rows in it and the div's height is set to show 10 rows of that table. CSS's overflow:auto lets me scroll through the 40 rows. All is well there.
How can I, with JavaScript cause the table to programatically position to a given row (i.e., programmatically scroll the table up or down by row)?
Solution
Where superHappyFunDiv
is the ID of the container DIV and rows is a 0-based row index:
function scrollTo(row)
{
var container = document.getElementById("superHappyFunDiv");
var rows = container.getElementsByTagName("tr");
row = Math.min(Math.max(row, 0), rows.length-1);
container.scrollTop = rows[row].offsetTop;
}
Will attempt to scroll the requested row to the top of the container. Tested in IE6 and FF3.
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow