如何使用jQuery将表的一行滚动到视图（element.scrollintoView）？

时间：2009-11-26 21:44:18

标签： jquery scroll

我正在使用jQuery动态地向表中添加行。 table位于div内overflow:auto，因此会产生垂直滚动条。

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

12 个答案:

答案 0 :(得分：84)

如果你需要滚动到列表中的任意项目（而不是总是在底部），以下情况会更好：

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

答案 1 :(得分：75)

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

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

应该做的伎俩！

答案 2 :(得分：29)

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

我写了一个jQuery plugin，它完全按照它在锡上的说法（以及正是你需要的）。好处是它只会在元素实际关闭时滚动容器。否则不会执行滚动。

它就像这样简单：

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

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

答案 3 :(得分：18)

更简单：

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

如果选择器中有多个项目返回，则get（0）将只获得第一个项目。

答案 4 :(得分：4)

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

下面的示例使用jQuery选择带有#yourid的元素。

＆＃13;
＆＃13; 
$( "#yourid" )[0].scrollIntoView();
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

答案 5 :(得分：3)

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

答案 6 :(得分：2)

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

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

这样的事可能吗？

答案 7 :(得分：2)

我找到了一个案例（溢出div＆gt;表＆gt; tr＆gt; td），其中滚动到tr的相对位置不起作用。相反，我必须使用scrollTop将溢出容器（div）滚动到<tr>.offset().top - <table>.offset().top。例如：

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

答案 8 :(得分：1)

与上述相同，几乎没有修改

＆＃13;
＆＃13; 
function focusMe() {
       var rowpos = $('#FocusME').position();
        rowpos.top = rowpos.top - 30;
        $('#container').scrollTop(rowpos.top);
    }
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

答案 9 :(得分：0)

file
$( "#yourid" )[0].scrollIntoView();

答案 10 :(得分：0)

我无法在上面的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());
  }
}

答案 11 :(得分：0)

这是我的尝试，它是我项目的可行解决方案。

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);
}
相关问题
最新问题