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

用于检查div类“media”是否在浏览器可视视口内的function,而不pipe窗口滚动位置如何。

<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与这个function,但我不知道如何使其工作。

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

那么,你是如何努力使其工作? 根据该插件的文档, .visible()返回一个布尔值,指示该元素是否可见。 所以你会这样使用它:

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

我使用的另一个jQuery插件是添加视口select器的。 因此,不要检查布尔值,而要根据可见性select元素:

 $('#element:in-viewport').doSomething(); 

检查元素在不带插件的视口中是否可见:

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

如果视口的底部位置大于元素的顶部位置,并且视口的顶部位置小于元素的底部位置,则元素位于视口中(至less部分)。 简单来说,当元素的任何部分位于视口的顶部和底部之间时,元素在屏幕上可见。

现在,您可以编写一个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 。

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

这只检查项目的顶部和底部位置,不检查项目是否在水平方向上在视口外部。

你可以看到这个例子 。

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

detectPartial:

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

visible是布尔variables,表示元素是否可见。

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

这是一个没有插件的方法:

首先得到元素的位置。 然后将滚动位置和视口高度一起添加。

如果滚动位置和视口高度的组合大于或等于元素位置,则位于视口中。

 var element_position = $("#element").offset().top; var scroll_position = $(window).scrollTop(); var viewport_height = $(window).height(); if((scroll_position + viewport_height) > element_position){ // Do something because the element is in the viewport }