【问题标题】: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) 滚动到 &lt;tr&gt;.offset().top - &lt;table&gt;.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 功能/插件。
              猜你喜欢
              • 1970-01-01
              • 1970-01-01
              • 1970-01-01
              • 1970-01-01
              • 1970-01-01
              • 1970-01-01
              • 2013-12-30
              • 1970-01-01
              • 1970-01-01
              相关资源
              最近更新 更多