How do I scroll a row of a table into view (element.scrollintoView) using jQuery?
JqueryScrollJquery Problem Overview
I'm dynamically adding rows to a table using jQuery.
The table is inside a div which has overflow:auto thus causing a vertical scrollbar.
I now want to autoscroll my container div to the last row. What's the jQuery version of tr.scrollintoView()?
Jquery Solutions
Solution 1 - Jquery
This following works better if you need to scroll to an arbitrary item in the list (rather than always to the bottom):
function scrollIntoView(element, container) {
var containerTop = $(container).scrollTop();
var containerBottom = containerTop + $(container).height();
var elemTop = element.offsetTop;
var elemBottom = elemTop + $(element).height();
if (elemTop < containerTop) {
$(container).scrollTop(elemTop);
} else if (elemBottom > containerBottom) {
$(container).scrollTop(elemBottom - $(container).height());
}
}
Solution 2 - Jquery
var rowpos = $('#table tr:last').position();
$('#container').scrollTop(rowpos.top);
should do the trick!
Solution 3 - Jquery
Plugin that scrolls (with animation) only when required
I've written a jQuery plugin that does exactly what it says on the tin (and also exactly what you require). The good thing is that it will only scroll container when element is actually off. Otherwise no scrolling will be performed.
It works as easy as this:
$("table tr:last").scrollintoview();
It automatically finds closest scrollable ancestor that has excess content and is showing scrollbars. So if there's another ancestor with overflow:auto but is not scrollable will be skipped. This way you don't need to provide scrollable element because sometimes you don't even know which one is scrollable (I'm using this plugin in my Sharepoint site where content/master is developer independent so it's beyond my control - HTML may change when site is operational so can scrollable containers).
Solution 4 - Jquery
much simpler:
$("selector for element").get(0).scrollIntoView();
if more than one item returns in the selector, the get(0) will get only the first item.
Solution 5 - Jquery
This runnable example shows how to use scrollIntoView() which is supported in all modern browsers: https://developer.mozilla.org/en-US/docs/Web/API/Element.scrollIntoView#Browser_Compatibility
The example below uses jQuery to select the element with #yourid.
$( "#yourid" )[0].scrollIntoView();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>..</p>
<p>..</p>
<p>..</p>
<p>..</p>
<p>..</p>
<p>..</p>
<p>..</p>
<p>..</p>
<p>..</p>
<p>..</p>
<p>..</p>
<p>..</p>
<p>..</p>
<p>..</p>
<p>..</p>
<p>..</p>
<p>..</p>
<p id="yourid">Hello world.</p>
<p>..</p>
<p>..</p>
<p>..</p>
<p>..</p>
Solution 6 - Jquery
If you just want to scroll, you could use jQuery's scrollTop method. http://docs.jquery.com/CSS/scrollTop
var table = jQuery( 'table' );
table.scrollTop( table.find( 'tr:last' ).scrollTop() );
Something like that maybe?
Solution 7 - Jquery
var elem=jQuery(this);
elem[0].scrollIntoView(true);
Solution 8 - Jquery
I found a case (overflow div > table > tr > td) in which scrolling to the relative position of the tr does not work. Instead, I had to scroll the overflow container (div) using scrollTop to <tr>.offset().top - <table>.offset().top. Eg:
$('#container').scrollTop( $('#tr').offset().top - $('#td').offset().top )
Solution 9 - Jquery
Same from above with little modification
function focusMe() {
var rowpos = $('#FocusME').position();
rowpos.top = rowpos.top - 30;
$('#container').scrollTop(rowpos.top);
}
<html>
<script src="https://code.jquery.com/jquery-3.1.0.min.js" integrity="sha256-cCueBR6CsyA4/9szpPfrX3s49M9vUU5BgtiJj06wt/s=" crossorigin="anonymous"></script>
<body>
<input type="button" onclick="focusMe()" value="focus">
<div id="container" style="max-height:200px;overflow:scroll;">
<table>
<tr>
<td>1</td>
<td></td>
</tr>
<tr>
<td>2</td>
<td></td>
</tr>
<tr>
<td>3</td>
<td></td>
</tr>
<tr>
<td>4</td>
<td></td>
</tr>
<tr>
<td>5</td>
<td></td>
</tr>
<tr>
<td>6</td>
<td></td>
</tr>
<tr>
<td>7</td>
<td></td>
</tr>
<tr>
<td>8</td>
<td></td>
</tr>
<tr>
<td>9</td>
<td></td>
</tr>
<tr id="FocusME">
<td>10</td>
<td></td>
</tr>
<tr>
<td>11</td>
<td></td>
</tr>
<tr>
<td>12</td>
<td></td>
</tr>
<tr>
<td>13</td>
<td></td>
</tr>
<tr>
<td>14</td>
<td></td>
</tr>
<tr>
<td>15</td>
<td></td>
</tr>
<tr>
<td>16</td>
<td></td>
</tr>
<tr>
<td>17</td>
<td></td>
</tr>
<tr>
<td>18</td>
<td></td>
</tr>
<tr>
<td>19</td>
<td></td>
</tr>
<tr>
<td>20</td>
<td></td>
</tr>
</table>
</div>
</body>
</html>
Solution 10 - Jquery
$( "#yourid" )[0].scrollIntoView();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>..</p>
<p>..</p>
<p>..</p>
<p>..</p>
<p>..</p>
<p>..</p>
<p>..</p>
<p>..</p>
<p>..</p>
<p>..</p>
<p>..</p>
<p>..</p>
<p>..</p>
<p>..</p>
<p>..</p>
<p>..</p>
<p>..</p>
<p id="yourid">Hello world.</p>
<p>..</p>
<p>..</p>
<p>..</p>
<p>..</p>
Solution 11 - Jquery
I couldn't add a comment to Abhijit Rao's answer above, so I am submitting this as an additional answer.
I needed to have the table column scroll into view on a wide table, so I added the scroll left features into the function. As someone mentioned, it jumps when it scrolls, but it worked for my purposes.
function scrollIntoView(element, container) {
var containerTop = $(container).scrollTop();
var containerLeft = $(container).scrollLeft();
var containerBottom = containerTop + $(container).height();
var containerRight = containerLeft + $(container).width();
var elemTop = element.offsetTop;
var elemLeft = element.offsetLeft;
var elemBottom = elemTop + $(element).height();
var elemRight = elemLeft + $(element).width();
if (elemTop < containerTop) {
$(container).scrollTop(elemTop);
} else if (elemBottom > containerBottom) {
$(container).scrollTop(elemBottom - $(container).height());
}
if(elemLeft < containerLeft) {
$(container).scrollLeft(elemLeft);
} else if(elemRight > containerRight) {
$(container).scrollLeft(elemRight - $(container).width());
}
}
Solution 12 - Jquery
Here is my stab at it and it's my working solution for my project.
function scrollToView($elem) {
var $parent = $elem.parent();
$parent.scrollTop(0);// reset parent scroll to calculate element's current position
var viewH = $parent.height()-$elem.height();// calculate viewing pane height
var elemTop = $elem.position().top;
var viewMultiplier = Math.floor( elemTop / viewH); // calculate view multiplier
$parent.scrollTop(viewMultiplier * viewH);
}