檢查整個div是否在瀏覽器窗口中可見

我在我的網站上有一個產品列表，當鼠標懸停在產品上時，會顯示一個信息格。唯一的問題是，在某些情況下，部分div不在瀏覽器窗口中。檢查整個div是否在瀏覽器窗口中可見

我需要檢查與JavaScript，如果是的話，如果是的話，我需要分配一個類到特定的div。我知道如何做最後一部分，但我不知道如何檢查整個div是否可見。

有人可以給我一個建議如何處理這個？

來源

2014-10-31 user3164891

肯定這只是一個CSS問題？如果它相對於父母的位置不應該被屏蔽... – NoLiver92 2014-10-31 10:03:14

@ NoLiver92產品本身具有相對位置，彈出窗口具有絕對位置。它（顯然）取決於整個屏幕上顯示div的屏幕大小 – user3164891 2014-10-31 10:05:54

如果info div的寬度大於window.width減去信息框的左側屬性，則需要通過javascript檢查懸停 – nunopolonia 2014-10-31 10:11:28

您的目標是確定您的HTML元素是否在視口中。如果你使用jQuery - 有幾個插件可以處理這個問題。

Jquery check if element is visible in viewport

http://opensource.teamdf.com/visible/examples/demo-basic.html

上面的例子，你想使用detectPartial設置爲true - 這樣你會知道的東西是否是視口內完全。

//added by JG 3/10/2011, to extend selectors. 
// Example: 
//if ($('#whatever').is(':inView')) {...} 
jQuery.extend(jQuery.expr[':'], { 
     inView: function(a) { 
      var st = (document.documentElement.scrollTop || document.body.scrollTop), 
       ot = jQuery(a).offset().top, 
       wh = (window.innerHeight && window.innerHeight < jQuery(window).height()) ? window.innerHeight : jQuery(window).height(); 
      return ot > st && (jQuery(a).height() + ot) < (st + wh); 
     } 
});

我做了一個若干年前，基於斷雷米夏普的inview插件（https://remysharp.com/2009/01/26/element-in-view-event-plugin）的 - 但對於垂直inview這些只檢查，不水平（橫向滾動開/關的左側或右側）。

來源

2014-10-31 10:07:31 Jason

檢查整個div是否在瀏覽器窗口中可見

回答

相關問題