javascript - 检查整个 div 在浏览器窗口中是否可见

Question

我的网站上有一个产品列表，将鼠标悬停在产品上时会显示一个信息 div。唯一的问题是，在某些情况下，部分 div 会落在浏览器窗口之外。

如果是这种情况，我需要使用 Javascript 检查，如果是这样，我需要为那个特定的 div 分配一个类。我知道如何做最后一部分，但我不知道如何检查整个 div 是否可见。

谁能给我建议如何处理这个问题？

Answer 1

您的目标是确定您的 HTML 元素是否在视口(viewport)中。如果您使用的是 jQuery - 有一些插件可以处理这个问题。

Jquery check if element is visible in viewport

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

在上面的示例中，您希望将 detectPartial 设置为 true - 这样您就可以知道该对象是否完全位于视口(viewport)内。

//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);
        }
});  

我在几年前做过，基于 Remy Sharp 的 inview 插件 ( https://remysharp.com/2009/01/26/element-in-view-event-plugin )——但这些只检查垂直的 in-view，而不是水平的(横向滚动/向左或向右滚动)。