检查整个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是否在浏览器窗口中可见

回答

相关问题