Question

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

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

有人可以给我一个如何处理这个问题的建议吗？

Answer 1

您的目标是确定您的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);
        }
});

我在几年前做过这件事，基于Remy Sharp的inview插件（https://remysharp.com/2009/01/26/element-in-view-event-plugin） - 但这些仅检查垂直视图，而不是水平（向左侧或向右侧滚动）

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

1 个答案: