Jquery检查元素在视口中是不是可见[重复]
Posted
技术标签:
【中文标题】Jquery检查元素在视口中是不是可见[重复]【英文标题】：Jquery check if element is visible in viewport [duplicate]Jquery检查元素在视口中是否可见[重复] 【发布时间】：2014-01-14 11:53:35 【问题描述】：无论窗口滚动位置如何，检查 div 类“媒体”是否在浏览器可视视口内的功能。
<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
);
请注意，这仅检查元素的顶部和底部位置，不检查元素是否水平超出视口。
【讨论】：
如果在一个 div（不是窗口）内检查，那么记得减去父 div 的偏移量。 如果你的按钮在顶部并且元素出现在底部，你会像这样减去偏移量：return ( elementBottom > viewportTop ) && ( elementTop < viewportBottom - $( this ).height() );
谢谢！我使用您的代码作为基础制作了一个更完整的插件：github.com/frontid/jQueryIsInViewport
$(window).height() 不考虑移动设备的缩放（至少在使用 jQuery v1.9 时）。更好的解决方案是使用window.innerHeight，当在移动设备上捏住屏幕放大时，它会发生变化。
顺便说一句，如果您在移动模式下使用 Chrome 调试器并单击页面并滚动，这将不起作用。仅当我使用拨轮上下滚动时才有效。除非我错过了什么【参考方案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 在下面讨论的内容的总结。我希望它可以帮助其他在像我一样进行研究时遇到这个问题的人。我还使用了以下问题的答案来制定我的答案：Show Div when scroll position。
【讨论】：
我觉得应该是 $("#element").outerHeight(); 小修正；就像@boblapointe 指出的那样：它应该是outerheight()，并且在offset()top 之间缺少一个点（'.'） 没有插件？！怎么样：$(window).scroll?? 你指的是jquery吗？ 如果您想检测元素何时首次进入视图/完全在视图中，然后何时开始离开视图（当下一个元素可见）。【参考方案3】：根据该插件的documentation，.visible() 返回一个布尔值，指示该元素是否可见。所以你会这样使用它：
if ($('#element').visible(true))
// The element is visible, do something
else
// The element is NOT visible, do something else
【讨论】：
你应该去掉 visible() 中的 (true) @slvnperron：为什么？这是对该插件的有效使用，并且对应于问题中发布的原始代码。 好吧，他可能想检查整个 div 的可见性，参数是用于部分检测 @slvnperron: True : 整个元素可见，false : 部分元素可见 一个不错的小图书馆。不幸的是，它已被废弃并且不再适用于当前版本的 jQuery。它会抛出类似Uncaught TypeError: r.getClientRects is not a function 的错误，这在与 jQuery>3 不兼容的库中很常见。【参考方案4】：
你可以看到this example。
// Is this element visible onscreen?
var visible = $(#element).visible( detectPartial );
检测部分：
True : 整个元素可见 false : 部分元素可见visible 是布尔变量，指示元素是否可见。
【讨论】：
这不是标准的jQuery函数（“可见不是函数）【参考方案5】：var visible = $(".media").visible();
【讨论】：
我不确定使用类选择器.media 是否微妙，因为如果有很多元素属于媒体类...
这不是标准的jQuery函数（“可见不是函数）以上是关于Jquery检查元素在视口中是不是可见[重复]的主要内容，如果未能解决你的问题，请参考以下文章