javascript - 测试用户是否可以在 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.
    }
}