如何根据自己的位置select元素？

Question

简短说明:
我想select一个基于它在视口上的位置的元素。

示例用例:
例如考虑下图。当我使用键盘导航时，我想在移动视口中移动到 Block A 之后的 Block D。但是在Block A下面放哪个block是不固定的。它可以根据 Block A 以下的差距进行更改，或者如果有其他块进入画面（比如 Block E），那么它可能会低于 Block A.

问题:
有没有办法 select 一个 block/element 放置在 Block A 或与此相关的任何块下面。

p.s. 同样，我知道 select 通过 class 名称和通过 DOM 订单导航。但是需要帮助来导航动态放置的元素。

Answer 1

假设您的页面结构如下：

页面顶部与块 A 顶部之间的间距：10px
A块高度：100px
Block A 底部与下一个 Block 之间的间距（例如通过 margin-bottom）：10px

所以文档的顶部和块A之后的未知块的顶部之间的距离是120px。我们称之为“secondBlockDistanceFromTop”。

现在您必须获得块 A 之后所有可能块的列表，您可以通过给所有块一个“.block”class 并使用“document.querySelectorAll”来做到这一点。我们将这个数组存储在“blocks”变量中。

每个 DOM 对象距文档顶部的距离可以通过以下公式计算：

 let blockDistanceFromTop=el.getBoundingClientRect().top +  window.scrollY

现在您可以在“blocks”数组上使用数组迭代方法并检查每个元素的“blockDistanceFromTop”是否等于“secondBlockDistanceFromTop”

Answer 2

在@Erfan 的回答的基础上，我实现了以下内容：

我正在从左边获取每一列的位置，并且将远处的所有元素（比如x）推入一个数组。

现在我正在制作一个对象，其键作为左偏移像素距离 (x)（作为字符串）& 值作为元素数组。

像这样：

obj{
"245": [],
"478": [],
"789": []
}

那我就是遍历对象了。这实质上将问题简化为二维数组遍历。

如果我的解释不是很清楚，你可以看看 code here & the live demo here.

如何根据自己的位置select元素？

How to select elements based on their position?

html

javascript

jquery

web-frontend

angularjs