javascript - 检测 div 是否在浏览器窗口中不可见

Question

我想检测我正在构建的交互式地图是否在浏览器窗口中不可见。如果 div 不可见，我会显示一个弹出窗口，上面写着“这种方式”或类似的东西。主要问题是检测 div 何时在文档窗口中不可见。

Answer 1

我从您的问题中收集到的是您想检测是否可以在屏幕的可见部分看到 div，而不是根据其 CSS（显示、可见性）是否可见。

如果是这样，您需要确定 div 的偏移量，然后检查它是否在文档尺寸或其他元素尺寸的范围内。

像这样的东西（假设你正在使用 jQuery）......

var div_offset = $('#div').offset();

if( div_offset.top < $(document).height() &&
    div_offset.left < $(document).width() ) {
    // div is within window bounds
}

这是一个非常基本的例子。您当然需要考虑要显示多少 div 元素以使其被视为“可见”......即使只有 div 的单个顶部/左侧像素位于其中，上面的代码也是正确的文档边界。通过将宽度/高度添加到偏移量来测试右下角是否显示来做到这一点。

Answer 2

您可以使用is功能:visible

现场演示

if($('#divId').is(':visible'))
{
     alert("div is visible");
}
else
{
     alert("div is not visible");
}

或者

if($('#divId :visible').length)
{
     alert("div is visible");
}
else
{
     alert("div is not visible");
}

Answer 3

您可以检查如下：

if (document.getElementById("myDiv").style.visibility == 'hidden'){
//
}else{
//
}

Answer 4

你也可以像这样使用没有“是”

     // check if div is visible
     $("div:visible").click(function () {
        alert("hello to all");
       });

     // check if div is hidden
     $("div:hidden").show("fast");

Answer 5

如果要检查元素是否在视口中可见，可以使用InView

使用 npm 安装它：

npm install @opuu/inview

像这样使用它：

// import it
import InView from "@opuu/inview";


// select elements to track
let elements = new InView(".selector");

// add enter event listener
elements.on("enter", (event) => {
    console.log(event);
    // do something on enter
});

// add exit event listener
elements.on("exit", (event) => {
    console.log(event);
    // do something on exit
});

注意：我写了这个包。