如何使用观察者检查 div 是否可见？ 也许是 Azure 服务器问题？

如何解决如何使用观察者检查 div 是否可见？ 也许是 Azure 服务器问题？

如果我的页面上的元素当前可见（这是通过按钮点击或函数调用设置的），我需要检查而不采取进一步行动。

从我目前所读到的内容来看，观察者似乎是正确的工具。 在我的本地机器上一切正常。但是在我的 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 服务器上的设置？

解决方法

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

我这么说是因为，要检查元素是否进入视口，您应该使用 Intersection Observer，而不是 Resize Observer。

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

为了简单地检查一个元素是否在视口内（所以它应该是“可见的”）这是一个可能的解决方案：

// 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。 在 devtools 中，$ 符号是 querySelector 的快捷方式，因此如果您直接通过 devtools 尝试此代码，这可能会引发一些混乱。

,

能不能把在线服务器涉及的JS文件加一份？此外，如果您在进入站点之前拍摄控制台的快照，则可以很好地诊断 javascript 问题。最有可能的是 JS 库没有正确加载。