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

Question

我正在使用jQuery动态地向表中添加行.的table是内部的div已overflow:auto从而导致垂直滚动条.

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

Answer 1

如果您需要滚动到列表中的任意项(而不是始终到底部),以下情况会更好:

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

Answer 2

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

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

应该做的伎俩!

Answer 3

仅在需要时滚动(带动画)的插件

我写了一个jQuery插件,它完全按照它在锡上所说的那样(也正是你需要的).好处是它只会在元素实际关闭时滚动容器.否则不会执行滚动.

它的工作原理很简单:

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

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

Answer 4

更简单:

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

如果选择器中有多个项目返回,则get(0)将只获得第一个项目.

Answer 5

这个可运行的示例显示了如何使用所有现代浏览器都支持的scrollIntoView（）：https : //developer.mozilla.org/zh-CN/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>