Javascript 如何使用观察者检查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服务器上是否有我必须检查的设置？

能否添加在线服务器中涉及的JS文件的副本？此外，如果您在进入站点之前拍摄控制台的快照，则最好诊断javascript问题。最可能的情况是JS库没有正确加载。

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

我这样说是因为，要检查元素是否已进入视口，应该使用，而不是“调整大小”观察者

您将在上面的MDN链接中深入了解此观察器的工作方式

要简单地检查某个元素是否在视口中，使其可见，这是一种可能的解决方案：

//获取目标元素的引用 let元素=document.querySelector'sidebar_container'； //创建一个函数，用于处理某些元素与视口之间的任何交点。 let handleIntersection=函数项{ //遍历所有观察到的元素 用于输入条目{ //检查元素是否与视口相交 if entry.isIntersecting{ console.log以下元素在视口中可见：，entry.target； // ... } } } const observer=新的intersectionobserver handleintersection； 观察者，观察者； 此外，您应该向观察者传递一个实际的DOM元素，而不是jQuery包装器。为此，最好只使用document.querySelector而不是jQuery来选择元素。

---

在devtools中，$符号是查询选择器的快捷方式，因此，如果您直接通过devtools尝试此代码，可能会引起一些混乱。

Hi Jonsow，您正在使用jquery吗？。我相信jquery$返回的对象不是一个元素，请尝试使用target.elementAh，好的，我现在正在使用QuerySelector，很好。关于交点观察者。。。哇，巨大的文档。但是，在哪里整合这个问题在这里是可见的还是不可见的？到目前为止，我从未使用过任何观察者：-/Hi Jon，我已经用一个小例子更新了anser，说明了如何使用观察者，我承认这篇文章非常深入，但也很复杂。因此它是isIntersecting而不是is:visible。这对我来说绝对是件新鲜事！我已经从你的解释中学到了很多——谢谢你的解释。明天早上我会试试你的功能。我很好奇！！早上好，Drago，已经测试过了，效果很好——只是不是每一页都是如此。在几个子文件夹上仍会出现相同的错误。不知道是什么，但我猜，这是一个不同的问题，在Azure服务器上发布导致有趣的错误在过去…完美！很高兴知道它现在起作用了：