Jquery检查元素是否在视口中可见

Question

Jquery检查元素是否在视口中可见

137

检查div类"media"是否在浏览器的视口之内，而不考虑窗口滚动位置的函数。

<HTML>
<HEAD>
  <TITLE>My first HTML document</TITLE>
</HEAD>
<BODY>
  <div class="main">
   <div class="media"></div>
  </div>

</BODY>
</HTML>

尝试使用这个插件https://github.com/customd/jquery-visible，但我不知道如何使它工作。

$('#element').visible( true );

- Vim Bonsu

使用Intersection Observer API来检测元素是否在视口中，详情请查看此处 - https://frontendguruji.com/blog/how-to-detect-if-element-is-in-viewport-intersection-observer-api/ - Mandeep Pasbola

5个回答

134

使用jQuery检查元素是否在视口中可见：

首先确定元素的顶部和底部位置。然后通过将滚动位置添加到视口高度来确定视口底部相对于页面顶部的位置。

如果视口底部的位置大于元素的顶部位置，并且视口顶部的位置小于元素的底部位置，则该元素位于视口内（至少部分可见）。简单地说，当元素的任何部分位于视口顶部和底部范围之间时，该元素在屏幕上可见。

现在，您可以编写if / else语句，其中if语句仅在满足上述条件时运行。

下面的代码执行了上述内容：

// this function runs every time you are scrolling

$(window).scroll(function() {
    var top_of_element = $("#element").offset().top;
    var bottom_of_element = $("#element").offset().top + $("#element").outerHeight();
    var bottom_of_screen = $(window).scrollTop() + $(window).innerHeight();
    var top_of_screen = $(window).scrollTop();

    if ((bottom_of_screen > top_of_element) && (top_of_screen < bottom_of_element)){
        // the element is visible, do something
    } else {
        // the element is not visible, do something else
    }
});

这篇回答是对下面Chris Bier和Andy正在讨论的内容的总结。我还使用了回答以下问题的方法来制定我的回答：当滚动位置时显示Div。

- ADB

4

小修正：就像@boblapointe指出的那样：应该是outerheight()，而且在offset()和top之间缺少一个点号（'.'）。 - Maurice

3

没插件？那 $(window).scroll 怎么办？ - Bruno Casali

如果您想检测元素何时首次进入视图/完全进入视图，以及何时开始离开视图（当下一个元素的顶部可见时），则此答案的先前版本也可能会有所帮助。 - ADB

@ADB 这对于id非常有效，但对于类不起作用。有没有办法让它工作？ - Rob

处理简单情况的绝佳解决方案，无需额外插件。 - jyoseph

显示剩余6条评论

66

根据该插件的文档，.visible()返回一个布尔值，指示元素是否可见。因此，您可以像这样使用它：

if ($('#element').visible(true)) {
    // The element is visible, do something
} else {
    // The element is NOT visible, do something else
}

- David

14

你应该将visible()中的（true）删除。 - slvnperron

1

@slvnperron：为什么？这是插件的有效用法，并且对应于在问题中发布的原始代码。 - David

他可能想要检查整个div的可见性，参数是用于部分检测。 - slvnperron

2

@slvnperron： True：整个元素可见， False：部分元素可见。 - ThunderPhoenix

5

一个不错的小库。不幸的是，它已经被废弃了，并且不能与当前版本的jQuery一起使用。它会抛出像 Uncaught TypeError: r.getClientRects is not a function 这样的错误，这是与jQuery> 3不兼容的库常见的问题。 - Cerin

显示剩余4条评论

-2

您可以查看此示例。

// Is this element visible onscreen?
var visible = $(#element).visible( detectPartial );

detectPartial：

True：整个元素可见
False：部分元素可见

visible 是一个布尔变量，用于指示元素是否可见。

- ThunderPhoenix

4

这不是一个标准的 jQuery 函数（"visible is not a function"）。 - cupiqi09

-4

var visible = $(".media").visible();

- slvnperron

1

我不确定使用类选择器.media是否微妙，因为如果有许多元素属于媒体类... - ThunderPhoenix

3

这不是一个标准的jQuery函数（"visible is not a function"）。 - cupiqi09

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Tom Pažourek · Accepted Answer

你可以编写以下类似的jQuery函数来确定一个元素是否在视口中。

在包含jQuery的某个位置包含此代码：

$.fn.isInViewport = function() {
    var elementTop = $(this).offset().top;
    var elementBottom = elementTop + $(this).outerHeight();

    var viewportTop = $(window).scrollTop();
    var viewportBottom = viewportTop + $(window).height();

    return elementBottom > viewportTop && elementTop < viewportBottom;
};

使用示例：

$(window).on('resize scroll', function() {
    if ($('#Something').isInViewport()) {
        // do something
    } else {
        // do something else
    }
});

请注意，这仅检查元素的顶部和底部位置，不检查元素是否在视口水平方向之外。