javascript - 如何滚动到 div 内的元素？

Question

我有一个滚动的 div，当我点击它时我想有一个事件，它会强制这个 div 滚动以查看里面的元素。 我这样写它的 JavasSript:

document.getElementById(chr).scrollIntoView(true);

但这会在滚动 div 本身的同时滚动所有页面。 如何解决？

我想这样说: MyContainerDiv.getElementById(chr).scrollIntoView(true);

Answer 1

您需要获取要滚动到 View 中的元素相对于其父元素(滚动的 div 容器)的顶部偏移量:

var myElement = document.getElementById('element_within_div');
var topPos = myElement.offsetTop;

变量 topPos 现在设置为滚动 div 顶部与您希望可见的元素之间的距离(以像素为单位)。

现在我们使用 scrollTop 告诉 div 滚动到那个位置:

document.getElementById('scrolling_div').scrollTop = topPos;

如果你使用原型(prototype) JS 框架，你会像这样做同样的事情:

var posArray = $('element_within_div').positionedOffset();
$('scrolling_div').scrollTop = posArray[1];

同样，这将滚动 div，以便您希望看到的元素恰好位于顶部(或者如果不可能，则尽可能向下滚动以使其可见)。