在可滚动的div中找到顶部和最后一个元素

Question

我有一个固定高度的可滚动div。在滚动时，我需要将元素放在可见视口的顶部和视口底部的元素。我可以使用scrollTop获取滚动条的位置，但是我不知道如何获取元素。

更新：为清晰起见，已设置格式化问题。

Answer 1

获取div的滚动位置

var scrollY = document.getElementById("yourDiv").scrollTop;

遍历内部元素并查看其位置

var divs = document.getElementById("yourDiv").getElementsByTagName("div");
alert(divs[0].offsetTop)

找出哪一个位于scrollTop位置，另一个位于scrollTop +高度位置

Answer 2

您应该使用DOM元素循环遍历div。看看这里，我认为它可能是一个有用的资源：http://www.howtocreate.co.uk/tutorials/javascript/dombasics

使用某些数组和计数器，您应该能够获得div中的最后一个元素。

Answer 3

我假设您的DIV是一长串文本行，并且您的所有行都将具有统一的高度。如果这是真的，那么您不需要询问哪一个位于视口的顶部，因为您将能够计算它。

你还是要完整地显示这些东西的第一页，所以你要创建一个完整的可显示的行，询问它的高度并记住它。然后添加一些包含文本的行，直到它们的总高度大于窗口的高度。然后，添加1990左右的空行，以便拇指的大小和位置准确反映列表的大小。

然后，当有人滚动窗口时，您可以计算出哪些线条应该可见;消除那些已经移出视野并构建应该可见的那些。完成！

（我想 - 我从未尝试过这个！）

Answer 4

或者您可以尝试使用firstElementChild和lastElementChild：

first = document.querySelector('#your_div_id_or_selector').firstElementChild; 
first.scrollIntoView()

和最后一个元素

last = document.querySelector('#your_div_id_or_selector').lastElementChild;
last.scrollIntoView()