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

一起使用

<强> Live Demo

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");

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

4 个答案: