如何滚动到div中的元素？

javascript html scroll

2022-08-30 00:25:11

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

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

但这会在滚动自身时滚动所有页面。如何解决这个问题？div

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

答案 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，以便您希望看到的元素恰好位于顶部（或者如果不可能，请尽可能向下滚动，使其可见）。

答案 2

您必须在要滚动到的 DIV 中找到元素的位置，并设置 scrollTop 属性。

divElem.scrollTop = 0;

更新：

上下移动的示例代码

  function move_up() {
    document.getElementById('divElem').scrollTop += 10;
  }

  function move_down() {
    document.getElementById('divElem').scrollTop -= 10;
  }