如何滚动到div中的元素？

Question

我有一个滚动条div，当我单击它时我想要一个链接，它将迫使div其滚动以查看其中的元素。我这样写它的JavasSript：

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

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

我想这样说

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

Answer 1

您需要获取要滚动到视图中的元素相对于其父元素（滚动div容器）的顶部偏移量：

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

现在，将变量topPos设置为滚动div的顶部与希望显示的元素之间的距离（以像素为单位）。

现在，我们告诉div使用scrollTop以下命令滚动到该位置：

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

如果您使用原型JS框架，则将执行以下操作：

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

再次，这将滚动div，以便您希望看到的元素恰好在顶部（或者，如果不可能的话，请尽可能向下滚动以使其可见）。