Matthew Cox Matthew Cox - 1 month ago 11
Javascript Question

How do you make a table row scroll into view when the table is in a scrollable div with jquery?

With a div that scrolls:

<div id="PVwindow" style="overflow: scroll; max-width:800px; max-height:230px; float:left;">


how do I get a row to be scrolled into view like:

<table id="PVtable"><tbody><tr>.....</tr>.....<tr id="scrollToViewP" style="background-color: #FFFF99;"><td>xxxx</td></tr></tbody></table>


Here is the non-working code (it scrolls but out of view):

$( document ).ready(function() {
if ($("#scrollToViewP:not(:visible)")) {
$("#PVwindow").animate({
scrollTop: $("#scrollToViewP").offset().top
}, 1000);
}
});


Here is a jsfiddle working example that scrolls to the bottom

Answer

Here is a solution that works most of the time (Like 80%), sometimes it scrolls the whole window as well as the div.

<script>
$( document ).ready(function() {

    var element = document.getElementById("scrollToViewP");
    element.scrollIntoView({block: "end", behavior: "smooth"});

});

I'm still hopeful someone will come along and improve this. (Works in FireFox and IE 11)

Comments