如何在 JavaScript 中滚动到有界 Div 内的元素？

滚动到有界 Div 内的元素

在 Web 开发中，在页面上的元素内滚动对于用户体验至关重要。开发人员面临的一个常见问题是滚动到滚动 div 中的元素。

问题：

用户想要单击滚动 div 中的元素并自动获得它滚动查看。但是，使用以下 JavaScript 方法：

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

导致整个页面滚动，包括 div 本身。这种行为是不可取的。

解决方案：

要仅滚动 div 查看目标元素，需要计算该元素相对于其顶部的偏移量父级（滚动的 div 容器）。

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

变量 topPos 现在包含滚动 div 的顶部与目标元素之间的距离。

要将 div 滚动到该位置，使用scrollTop：

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

原型框架：

如果使用Prototype JS框架，可以使用以下代码：

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

此方法将滚动 div，使目标元素恰好位于顶部，或尽可能向下滚动以在 div 中可见。

以上是如何在 JavaScript 中滚动到有界 Div 内的元素？的详细内容。更多信息请关注PHP中文网其他相关文章！