是否有一种有效的方法来判断DOM元素(在HTML文档中)当前是否可见(出现在视口中)？
(关于Firefox的问题)
StackOverflow的是装载 有 问题有关如何检查元素是否在检视真正可见的,但它们都寻求一个布尔答案.我有兴趣获得元素的可见实际区域.
function getVisibleAreas(e) {
...
return rectangleSet;
}
更正式地说 - 元素的可见区域是CSS坐标中的一组(最好是非重叠的)矩形,elementFromPoint(x, y)如果点(x,y)包含在(至少)一个矩形中,它将返回元素.集合.
在所有DOM元素(包括iframe)上调用此函数的结果应该是一组非重叠区域集,其中union是整个视口区域.
我的目标是创建一种视口"转储"数据结构,它可以有效地为视口中的给定点返回单个元素,反之亦然 - 对于转储中的给定元素,它将返回可见的集合区域.(数据结构将传递给远程客户端应用程序,因此当我需要查询视口结构时,我不一定能访问实际文档).
实施要求:
hidden状态z-index,页眉和页脚等.
当然,我可能天真并且elementFromPoint在视口中调用每个离散点,但是性能是至关重要的,因为我迭代所有元素,并且会经常这样做.
请指导我如何实现这一目标.
免责声明:我对网络编程概念很不错,所以我可能使用了错误的技术术语.
进展:
我想出了一个实现.算法非常简单:
这会产生一组区域/矩形,每个区域/矩形指向一个元素.
我的实施问题是:
尽我所知,这个elementFromPoint电话需要花费很多时间才能使我的算法相对无用......
有谁能建议更好的方法？
这是我的实现:
function AreaPortion(l, t, r, b, currentDoc) {
if (!currentDoc) currentDoc = document;
this._x = l;
this._y = t;
this._r = r;
this._b = b;
this._w …