简短说明：
我想根据它在视口上的位置来选择一个元素。
示例用例：
例如考虑下图。当我使用键盘导航时，我想在移动视口中的Block A 之后移动到Block D。但是哪个块放在Block A下面是不固定的。它可以根据Block A 下方的间隙而变化，或者如果出现额外的块（比如Block E），那么它可能会低于Block A。
问题：
有没有办法选择放置在 A 块或任何块下方的块/元素。
附言 同样，我知道通过类名进行选择并通过 DOM Order 进行导航。但需要帮助来导航动态放置的元素。
【问题讨论】：
标签： javascript html jquery angularjs web-frontend
假设您的页面结构如下：
所以文档顶部和Block A之后的未知块顶部之间的距离是120px。我们称之为“secondBlockDistanceFromTop”。
现在您必须在块 A 之后获取所有可能块的列表，您可以通过为所有块指定一个“.block”类并使用“document.querySelectorAll”来做到这一点。我们将此数组存储在“blocks”变量中。
每个 DOM 对象到文档顶部的距离可以通过这个公式计算：
let blockDistanceFromTop=el.getBoundingClientRect().top + window.scrollY
现在您可以在“blocks”数组上使用数组迭代方法并检查每个元素的“blockDistanceFromTop”是否等于“secondBlockDistanceFromTop”
【讨论】：
以@Erfan 的回答为基础，这是我实现的：
我正在从左侧获取每一列的位置，并将远处的所有元素（比如x）推入一个数组中。
现在我正在制作一个对象，其键为左偏移像素距离 (x)（作为字符串），值作为元素数组。
类似这样的：
obj{
"245": [],
"478": [],
"789": []
}
那么我所做的就是遍历对象。这从本质上将问题简化为二维数组遍历。
如果我的解释不是很清楚，您可以通过查看code here 和live demo here 获得更好的主意。
【讨论】：