非活动选项卡上的 JavaScript IntersectionObserver？

Question

我尝试使用 IntersectionObserver 来检查元素（按钮）何时可见。

但是当我退出时，该选项卡处于非活动状态，他就看不到它了。当我进入时，他立即发送找到的 console.log。

任何想法，如果有办法，检查按钮是否可见

const observer = new IntersectionObserver(([entry]) => {
    if (entry.isIntersecting) {
        console.log('found')
    }, {
        root: null,
        threshold: 0.1, // set offset 0.1 means trigger if atleast 10% of element in viewport
})
observer.observe(document.querySelector(el));

我也尝试过 MutationObserver 但无法检查按钮是否在视图中。只是检查后台是否有代码。当它存在一次时，它就永远存在，当它不可见时也是如此。

我只是想检查一下按钮现在是否可以点击，仅此而已。但是通过 MutationObserver 他发现了垃圾邮件，因为他在后台找到了代码，而且当按钮不在视图中时也是如此。

我试图寻找有同样问题的人。也尝试过mutationObserver，但那不一样。

Answer 1

像这样尝试一次

观察目标元素，当该元素在视口中可见度至少为 10% 时触发回调。

监听文档的可见性何时发生变化（即，当用户按 Tab 键进入或退出时）。当选项卡变为活动状态时，它会使用其边界矩形手动检查元素的可见性。

const observer = new IntersectionObserver(([entry]) => {
    if (entry.isIntersecting) {
        console.log('found');
    }
}, {
    root: null,
    threshold: 0.1 // Trigger when at least 10% of the element is in the viewport
});

const targetElement = document.querySelector(el);
observer.observe(targetElement);

// Handle tab visibility change

document.addEventListener('visibilitychange', () => {
    if (document.visibilityState === 'visible') {
    
        // Manually check if the element is visible when the tab becomes active
        const rect = targetElement.getBoundingClientRect();
        const isVisible = (
            rect.top >= 0 &&
            rect.left >= 0 &&
            rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
            rect.right <= (window.innerWidth || document.documentElement.clientWidth)
        );

        if (isVisible) {
            console.log('found');
        }
    }
});