Question

HTML：

<div id="parent">
    <div class="myDiv"></div>
    <div class="myDiv"></div>
    <div class="myDiv mySelectedDiv"></div>
    <div class="myDiv"></div>
</div>

我将mySelectedDiv类动态地附加到div上，一次一次。我希望滚动条定位在该选定的div处。有什么建议吗？

我尝试了下面的代码在所选div的位置上上下移动滚动条。但是，当div的高度发生变化时，它的准确性不高，在我的案例中就是如此。

element.scrollBy({
      top: 100,
      behavior: "smooth"
    })

Answer 1

在获得元素的相对于窗口或容器的顶部Y坐标之后，应该可以使用window.scrollTo()来做到这一点。

第二部分可能对stackoverflow有很多答案:) https://stackoverflow.com/search?q=get+element+top+position

编辑：如果您不关心旧的浏览器，也可以尝试以下新API：https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView

编辑2：正如@mplungjan在评论中指出的那样，实际上所有浏览器都支持该功能，即使是IE6之类的旧浏览器也是如此。至少是基本语法。但是，它被认为是一项尚未标准化的实验技术，因此可能需要对其进行良好的测试。

Answer 2

这是对我有用的解决方案：

let parent = document.getElementsByClassName('parent-div')[0];
let selectedDiv = document.querySelector('.div-selected').getBoundingClientRect().top;

parent.scrollBy({
  top: selectedDiv - 100,
  behavior: "smooth"
})

使用-100px计算位置有助于滚动条使选定的div居中。

有没有一种方法可以检测到具有特定类的div并将顶部滚动条移动到其在父div内的位置？

2 个答案: