测试用户是否可以在html页面上看到元素

Question

有没有办法知道某个元素在html页面上是否可见？

像这样：

考虑到水平/垂直滚动位置，浏览器窗口的宽度/高度以及页面上元素的位置/大小，我们可以做到这一点，但我对jQuery的经验很少，所以我不知道如何去做吧。可能会有一个简单的功能，我不知道。

Answer 1

您可以使用.is(':visible')选择器检查DOM中当前是否可以看到元素。

修改

但是，正如@BenM所提到的，这不会检查页面上的元素是否实际上超出了可滚动范围 - 在这种情况下你可以使用的一个很棒的小插件是Viewport Selectors for jQuery。

Answer 2

以下是我用来执行此操作的一些代码。它已经过测试，效果很好。

function isVisible($obj) {
    var top = $(window).scrollTop();
    var bottom = top + $(window).height();
    var objTop = $obj.offset().top;
    var objBottom = objTop + $obj.height();

    if(objTop < bottom && objBottom > top) {
        //some part of $obj is visible on the screen.
        //does not consider left/right, only vertical.
    }
}