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

javascript jquery visible

2022-08-30 04:43:05

用于检查 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 );

答案 1

您可以像这样编写一个 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
    }
});

请注意，这仅检查元素的顶部和底部位置，而不检查元素是否水平位于视区之外。

答案 2

使用 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。