Jquery 检查元素是否在 viewport 中可见

函数检查 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 );
314468 次浏览
小开
最佳答案

根据该插件的 文件，.visible()返回一个布尔值，指示元素是否可见。所以你可以这样使用它:

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

你可以看到 这个例子。

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

部分:

  • 真: 整个元素是可见的
  • False: 元素的一部分是可见的

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

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

使用 jquery 检查 viewport 中的元素是否可见:

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

如果 viewport 的底部位置大于元素的顶部位置，且 viewport 的顶部位置小于元素的底部位置，则元素在 viewport 中(至少部分)。简单地说，当元素的任何部分位于视图窗口的顶部和底部边界之间时，该元素在屏幕上可见。

现在可以编写一个 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
}
});

这个答案是克里斯 · 比尔和安迪在下面讨论的一个总结。我希望它能帮助其他像我一样在做研究时遇到这个问题的人。我还使用了以下问题的答案来表述我的答案: 滚动位置显示 Div。

小开

您可以像这样编写一个 jQuery 函数来确定一个元素是否在 viewport 中。

在包含 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
}
});

注意，这只检查元素的顶部和底部位置，而不检查元素是否位于 viewport 的水平方向之外。


提交答案