前端检测dom是否被遮盖，js 检测元素是否被覆盖
2022-11-01
7
0前端检测dom是否被遮盖new IntersectionObserver(([change]) => { console.log(change); // 被覆盖就是false，反之true console.log(change.isVisible) }, { threshold
前端检测dom是否被遮盖
new IntersectionObserver(([change]) => {
console.log(change);
// 被覆盖就是false，反之true
console.log(change.isVisible)
}, {
threshold: [1.0],
delay: 1000,
trackVisibility: true,
}).observe(document.querySelector(".first"));知识点：Document.elementFromPoint()
返回当前文档上处于指定坐标位置最顶层的元素, 坐标是相对于包含该文档的浏览器窗口的左上角为原点来计算的, 通常 x 和 y 坐标都应为正数.
js如下：
function hasOverLayer(element) {
let document = element.ownerDocument,
rect = element.getBoundingClientRect(), // 获取目标的矩形信息
x = rect.x,
y = rect.y,
width = rect.width,
height = rect.height;
x |= 0;
y |= 0;
width |= 0;
height |= 0;
// 四顶点取样
let elements = [
document.elementFromPoint(x+1, y+1),
document.elementFromPoint(x + width-1, y+1),
document.elementFromPoint(x+1, y + height-1),
document.elementFromPoint(x + width-1, y + height-1)
];
// 判断非本身及非子孙元素
return elements.filter((el)=> el !== null).some((el)=> el !== element && !element.contains(el));
}本文为转载文章，版权归原作者所有，不代表本站立场和观点。
