如何使用 jQuery 将表格的一行滚动到视图 (element.scrollintoView) 中？答案

【问题标题】：How do I scroll a row of a table into view (element.scrollintoView) using jQuery?如何使用 jQuery 将表格的一行滚动到视图 (element.scrollintoView) 中？
【发布时间】：2010-12-20 19:40:29
【问题描述】：

我正在使用 jQuery 向表中动态添加行。 table 位于 div 内，其中 overflow:auto 导致垂直滚动条。

我现在想将容器div 自动滚动到最后一行。 tr.scrollintoView()的jQuery版本是什么？

【问题讨论】：

根据this answer，这显然是所有主流浏览器都支持的内置 DOM 功能。只需element.scrollIntoView() 即可。

标签： jquery scroll

【解决方案1】：

这是我的尝试，它是我项目的有效解决方案。

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

【讨论】：

【解决方案2】：

与上面相同，稍作修改

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>

【讨论】：

【解决方案3】：

我无法对以上 Abhijit Rao 的回答添加评论，因此我将其作为附加回答提交。

我需要让表格列滚动到宽表格上的视图中，因此我在函数中添加了向左滚动功能。正如有人提到的，它在滚动时会跳跃，但它对我的目的有用。

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

【讨论】：

【解决方案4】：

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

【讨论】：

滚动整个页面，实际上是@BarryStaes 答案的副本

【解决方案5】：

这个可运行的示例展示了如何使用所有现代浏览器都支持的 scrollIntoView()： https://developer.mozilla.org/en-US/docs/Web/API/Element.scrollIntoView#Browser_Compatibility

下面的示例使用 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>

【讨论】：

【解决方案6】：

我发现一个案例（溢出 div > table > tr > td）滚动到 tr 的相对位置不起作用。相反，我不得不使用 scrollTop 将溢出容器 (div) 滚动到 <tr>.offset().top - <table>.offset().top。例如：

$('#container').scrollTop( $('#tr').offset().top - $('#td').offset().top )

【讨论】：

【解决方案7】：

更简单：

$("selector for element").get(0).scrollIntoView();

如果选择器中返回多个项目，get(0) 将只获取第一个项目。

【讨论】：

这也会影响页面的滚动。所以它不会工作。
这不做动画，也不处理可滚动的 div 内的滚动。
这不做动画，但我发现动画解决方案在我的特定用例中失败了，它有一个非常长的元素。动画解决方案有时会稍微偏离目标。 @Mark0978 我的用例是一个可滚动的 div——不知道为什么它适用于我的情况，但不适用于你的情况

【解决方案8】：

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

【讨论】：

this.scrollIntoView(true) 不会更直接吗？
给出的答案是唯一对我有用的东西

【解决方案9】：

仅在需要时滚动（带动画）的插件

我写了一个jQuery plugin，它完全按照锡上的说明进行操作（并且完全符合您的要求）。好消息是它只会在元素实际关闭时滚动容器。否则不会滚动。

就这么简单：

$("table tr:last").scrollintoview();

它会自动找到最近的可滚动祖先，其中包含过多的内容并显示滚动条。因此，如果有另一个具有 overflow:auto 但不可滚动的祖先将被跳过。这样你就不需要提供可滚动的元素，因为有时你甚至不知道哪个是可滚动的（我在我的 Sharepoint 站点中使用这个插件，其中内容/主控是开发人员独立的，所以它超出了我的控制 - HTML 可能会改变当站点运行时，可滚动容器也可以运行）。

【讨论】：

这个确实有效。试图修复@Abhijit Rao 的工作，但它有很多问题。这个就行了。
@Mark0978：但请注意，我必须更新它才能在 jQuery 1.8+ 中正常工作自定义选择器定义必须与 1.8+ 不同。
从 GitHub 获得插件并按承诺顺利运行。干得好！
自更新四年以来，这个插件仍然像魅力一样工作。我在角度指令中使用它:)
四年后，该插件对我不起作用-有时几乎没有目标但不在视野范围内。今天，假设目标只是一个元素，我使用javascript：var target = $(selector); target.get(0).scrollIntoView();

【解决方案10】：

如果您需要滚动到列表中的任意项目（而不是总是滚动到底部），则以下方法效果更好：

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

【讨论】：

先生，这不仅仅是一个答案，而是一个解决方案。谢谢。
您可以删除容器参数并替换为 var container = element.offsetParent;...
@Laurens：仅当可滚动元素是子对象的直接父级时才有效。更强大的解决方案是迭代其祖先，直到找到 .css("overflow") 返回“auto”或“scroll”的元素。
你的第四行不应该是 var elemTop = element.get(0).offsetTop 吗？直到我这样做，代码才起作用。
虽然这个解决方案几乎可以工作，但它存在严重的问题。一个是错字，但更严重的是它不能优雅地处理任何高度的项目。更好的解决方案是来自@Robert Koritnik 的插件

【解决方案11】：

如果你只想滚动，你可以使用 jQuery 的 scrollTop 方法。 http://docs.jquery.com/CSS/scrollTop

var table = jQuery( 'table' );
table.scrollTop( table.find( 'tr:last' ).scrollTop() );

可能是这样的吗？

【讨论】：

【解决方案12】：

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

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

应该做的伎俩！

【讨论】：

我发现了一个没有按预期工作的案例，在下面添加了一个答案，来源略有不同。
这不适用于数据表的新 fixed scrolling 功能/插件。