檢測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

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