如何使用 jQuery 将表格的一行滚动到视图 (element.scrollintoView) 中？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/1805808/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How do I scroll a row of a table into view (element.scrollintoView) using jQuery?
提问by Fuxi
I'm dynamically adding rows to a table using jQuery.
The tableis inside a divwhich has overflow:autothus causing a vertical scrollbar.
我正在使用 jQuery 向表中动态添加行。的table是内部的div已overflow:auto从而导致垂直滚动条。
I now want to autoscroll my container divto the last row. What's the jQuery version of tr.scrollintoView()?
我现在想将我的容器自动滚动div到最后一行。什么是 jQuery 版本tr.scrollintoView()？
回答by Abhijit Rao
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());
}
}
回答by Gausie
var rowpos = $('#table tr:last').position();
$('#container').scrollTop(rowpos.top);
should do the trick!
应该做的伎俩！
回答by Robert Koritnik
Plugin that scrolls (with animation) only when required
仅在需要时滚动（带动画）的插件
I've written a jQuery pluginthat 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.
我已经编写了一个jQuery 插件，它完全符合它在罐头上所说的（也正是你所需要的）。好处是它只会在元素实际关闭时滚动容器。否则将不执行滚动。
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:autobut 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).
它会自动查找最近的具有多余内容并显示滚动条的可滚动祖先。因此，如果有另一个祖先overflow:auto但不可滚动将被跳过。这样你就不需要提供可滚动的元素，因为有时你甚至不知道哪个是可滚动的（我在我的 Sharepoint 站点中使用这个插件，其中内容/母版是独立于开发人员的，所以它超出了我的控制 - HTML 可能会改变当站点运行时，可滚动容器也可以运行）。
回答by Mor Shemesh
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.
如果选择器中返回多个项目，则 get(0) 将仅获取第一个项目。
回答by Barry Staes
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
这个可运行的示例展示了如何使用所有现代浏览器都支持的 scrollIntoView()：https: //developer.mozilla.org/en-US/docs/Web/API/Element.scrollIntoView#Browser_Compatibility
The example below uses jQuery to select the element with #yourid.
下面的示例使用 jQuery 选择带有#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>回答by zuckerhut
var elem=jQuery(this);
elem[0].scrollIntoView(true);
回答by user1338062
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:
我发现了一种情况（溢出 div > table > tr > td），其中滚动到 tr 的相对位置不起作用。相反，我不得不使用 scrollTop 将溢出容器 (div) 滚动到<tr>.offset().top - <table>.offset().top. 例如：
$('#container').scrollTop( $('#tr').offset().top - $('#td').offset().top )
回答by Arun Prasad E S
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>回答by William
If you just want to scroll, you could use jQuery's scrollTop method. http://docs.jquery.com/CSS/scrollTop
如果你只是想滚动，你可以使用 jQuery 的 scrollTop 方法。http://docs.jquery.com/CSS/scrollTop
var table = jQuery( 'table' );
table.scrollTop( table.find( 'tr:last' ).scrollTop() );
Something like that maybe?
也许是这样的？
回答by Ajay Ram
$( "#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>