如何可靠检测元素从用户视角变为不可见？

确实存在可靠方案，不仅能检测display: none、visibility: hidden这类样式变更，还能识别元素被更高层级元素遮挡的场景。以下是具体实现思路和代码示例：

核心检测逻辑 #

判断元素是否从用户视角可见，需要结合基础可见性检查和遮挡检测：

• 基础可见性检查：先确认元素本身的状态——比如display是否为none、visibility是否为visible、元素尺寸是否为0、是否脱离DOM流（offsetParent为null）。
• 遮挡检测：通过document.elementFromPoint()方法，检测元素关键位置（如中心、四角）的顶层元素是否为目标元素或其子元素。如果所有关键点都被非目标元素覆盖，说明元素被遮挡不可见。

可订阅的监听实现 #

我们可以封装一个自定义监听机制，模拟类似elementUserVisibilityChanged的事件，在元素可见性变化时触发通知：

示例代码（基于你的Demo修改） #

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
// 检测元素是否从用户视角可见
function isElementUserVisible(el) {
    // 基础可见性检查
    const style = getComputedStyle(el);
    if (style.display === 'none' || style.visibility !== 'visible' || el.offsetParent === null) {
        return false;
    }
    const rect = el.getBoundingClientRect();
    // 元素尺寸为0则直接判定不可见
    if (rect.width === 0 || rect.height === 0) {
        return false;
    }
    // 检测多个关键点，避免元素部分露出时的误判
    const checkPoints = [
        {x: rect.left + rect.width/2, y: rect.top + rect.height/2}, // 中心
        {x: rect.left, y: rect.top}, // 左上角
        {x: rect.right, y: rect.bottom} // 右下角
    ];
    // 只要有一个点的顶层元素是目标元素或其子元素，就认为可见
    return checkPoints.some(point => {
        const topEl = document.elementFromPoint(point.x, point.y);
        return topEl === el || el.contains(topEl);
    });
}

// 简单防抖函数，优化频繁触发的事件性能
function debounce(func, delay) {
    let timeoutId;
    return function(...args) {
        clearTimeout(timeoutId);
        timeoutId = setTimeout(() => func.apply(this, args), delay);
    };
}

// 创建可见性监听函数
function observeElementUserVisibility(el, callback) {
    let lastVisibleState = isElementUserVisible(el);
    
    // 执行检测并触发回调
    function checkAndNotify() {
        const currentVisible = isElementUserVisible(el);
        if (currentVisible !== lastVisibleState) {
            lastVisibleState = currentVisible;
            // 触发自定义事件
            const event = new CustomEvent('elementUserVisibilityChanged', {
                detail: { isVisible: currentVisible }
            });
            el.dispatchEvent(event);
            if (callback) callback(currentVisible);
        }
    }
    
    // 监听元素自身及父元素的DOM变化（样式、结构）
    const observer = new MutationObserver(checkAndNotify);
    observer.observe(el, {
        attributes: true,
        attributeFilter: ['style', 'class'],
        subtree: true
    });
    if (el.parentElement) {
        observer.observe(el.parentElement, {
            attributes: true,
            attributeFilter: ['style', 'class'],
            childList: true,
            subtree: true
        });
    }
    
    // 监听窗口 resize、scroll 事件，防抖优化
    const debouncedCheck = debounce(checkAndNotify, 100);
    window.addEventListener('resize', debouncedCheck);
    window.addEventListener('scroll', debouncedCheck);
    
    // 初始检测
    checkAndNotify();
    
    // 返回销毁监听的方法，方便后续清理
    return () => {
        observer.disconnect();
        window.removeEventListener('resize', debouncedCheck);
        window.removeEventListener('scroll', debouncedCheck);
    };
}

$(document).ready(function(){
    const btn = document.getElementById('btn0');
    
    // 订阅自定义可见性变化事件
    btn.addEventListener('elementUserVisibilityChanged', (e) => {
        console.log(`按钮可见性变化：${e.detail.isVisible ? '可见' : '不可见'}`);
    });
    
    // 启动监听
    const stopObserving = observeElementUserVisibility(btn);
    
    $("#btn0").click(function(){
        $("#div0").css({"visibility":"visible"});
    }); 
});
</script>
</head>
<body>
<button id = "btn0">Click to hide this button with something</button> 
<div id="div0" style="width:100%;height:100%;position:absolute;top:0;left:0;z-index:10;background-color:green;visibility:hidden">Now you can't see the button</div>
</body>
</html>

注意事项 #

• 关键点选择：用多个检测点替代单一中心，能避免元素仅部分露出时的误判。
• 性能优化：对resize、scroll这类高频事件使用防抖处理，减少不必要的检测次数。
• 监听范围：需要同时监听元素自身和父元素的样式、结构变化，确保覆盖所有可能导致遮挡的场景。

内容的提问来源于stack exchange，提问作者AppleMoose