How do I scroll a row of a table into view (element.scrollintoView) using 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?

小开

最佳答案

var rowpos = $('#table tr:last').position();


$('#container').scrollTop(rowpos.top);

should do the trick!

小开

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());
}
}

小开

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).

小开

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.

小开

var elem=jQuery(this);
elem[0].scrollIntoView(true);

小开

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 )

小开

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>

小开

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>

小开

$( "#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>

小开

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());
}
}

小开

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);
}