javascript - 如何使用观察者来检查div是否可见？ (也许Azure服务器有问题？)

Question

我需要检查页面上的元素当前是否可见(这是通过按钮单击或函数调用设置的)，而无需采取进一步操作。

从我到目前为止所读到的内容来看，观察者似乎是正确的工具。 在我的本地机器上一切正常。但在我的 Azure 测试服务器上，我收到以下错误:

Uncaught TypeError: Failed to execute 'observe' on 'ResizeObserver': parameter 1 is not of type 'Element'

这是我正在使用的代码:

function setStatus() {
    var target = $('#sidebar_container');

    var ro = new ResizeObserver(() => {
        if (target.is(':visible')) {
            $("i.fa-user").addClass("active");
        } else {
            $("i.fa-user").removeClass("active");
        }        
    });

    // Observe element
    ro.observe(target);
}

代码是否有问题(尽管它在本地主机上运行)或者 Azure 服务器上是否有我需要检查的设置？

Answer 1

从您发布的代码来看，您似乎正在通过调整窗口大小在本地主机上测试此功能。

我这样说是因为，要检查元素是否已进入视口(viewport)，您应该使用 Intersection Observer ，而不是调整大小观察者。

您将在上面的 MDN 链接中深入了解该观察器的工作原理。

要简单地检查元素是否在视口(viewport)内(因此它应该是“可见的”)，这是一个可能的解决方案:

// Get a reference for the target element
let element = document.querySelector('#sidebar_container');

// Create a function that will handle any intersection between some elements and the viewport.
let handleIntersection = function (entries) {

    // Loop through all the observed elements
    for (let entry of entries) {

        // Check if the element is intersecting the viewport
        if (entry.isIntersecting) {
            console.log("The following element is visible in the viewport: ", entry.target);
            // ...
        }
    }
}

const observer = new IntersectionObserver(handleIntersection);

observer.observe(element);

此外，您应该向观察者传递一个实际的 DOM 元素，而不是 jQuery 包装器。为此，最好使用 document.querySelector 来选择元素，而不是使用 jQuery。 在开发工具中，$ 符号是 querySelector 的快捷方式，因此如果您直接通过开发工具尝试此代码，这可能会引发一些困惑。