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

Question

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

更新：为清楚起见，格式化问题。

score 1 · Accepted Answer

获取 div 的滚动位置

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

循环遍历里面的元素并查看它们的位置

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

找出哪一个在 scrollTop 位置，另一个在 scrollTop + height 位置

score 0 · Accepted Answer

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

无论如何，您都希望完整显示这些内容的第一页，因此您创建一个完整且可显示的行，询问它的高度并记住这一点。然后添加更多包含文本的行，直到它们的总高度大于窗口的高度。然后，添加 1990 左右的空行，以便拇指的大小和位置准确反映列表的大小。

然后，当有人滚动你的窗口时，你可以计算出哪些行应该是可见的；消灭那些已经移出视野的人，并建立那些应该可见的人。完毕！

（我想 - 我从来没有试过这个！）

score 0 · Accepted Answer

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

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

score 0 · Accepted Answer

或者您可以尝试使用firstElementChildand lastElementChild：

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

最后一个元素

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

4 回答 4