猿问

回到首页 个人中心 反馈问题 注册登录
下载APP
首页 课程 实战 体系课 手记 专栏 慕课教程

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

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

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


小怪兽爱吃肉
浏览 668回答 3
3回答

喵喔喔

那么，你是怎么试图让它发挥作用的？根据该插件的文档，.visible()返回一个布尔值，指示该元素是否可见。所以你要像这样使用它：if ($('#element').visible(true)) {&nbsp; &nbsp; // The element is visible, do something} else {&nbsp; &nbsp; // The element is NOT visible, do something else}
0

蝴蝶不菲

使用jquery检查元素在视口中是否可见：首先确定元素的顶部和底部位置。然后通过将滚动位置添加到视口高度来确定视口底部的位置（相对于页面顶部）。如果视口的底部位置大于元素的顶部位置并且视口的顶部位置小于元素的底部位置，则该元素位于视口中（至少部分地）。简单来说，当元素的任何部分位于视口的顶部和底部边界之间时，该元素在屏幕上可见。现在您可以编写if / else语句，其中if语句仅在满足上述条件时运行。下面的代码执行上面解释的内容：//&nbsp;this&nbsp;function&nbsp;runs&nbsp;every&nbsp;time&nbsp;you&nbsp;are&nbsp;scrolling$(window).scroll(function()&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;top_of_element&nbsp;=&nbsp;$("#element").offset().top; &nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;bottom_of_element&nbsp;=&nbsp;$("#element").offset().top&nbsp;+&nbsp;$("#element").outerHeight(); &nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;bottom_of_screen&nbsp;=&nbsp;$(window).scrollTop()&nbsp;+&nbsp;$(window).innerHeight(); &nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;top_of_screen&nbsp;=&nbsp;$(window).scrollTop(); &nbsp;&nbsp;&nbsp;&nbsp;if&nbsp;((bottom_of_screen&nbsp;>&nbsp;top_of_element)&nbsp;&&&nbsp;(top_of_screen&nbsp;<&nbsp;bottom_of_element)){ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//&nbsp;the&nbsp;element&nbsp;is&nbsp;visible,&nbsp;do&nbsp;something &nbsp;&nbsp;&nbsp;&nbsp;}&nbsp;else&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//&nbsp;the&nbsp;element&nbsp;is&nbsp;not&nbsp;visible,&nbsp;do&nbsp;something&nbsp;else &nbsp;&nbsp;&nbsp;&nbsp;}});这个答案总结了Chris Bier和Andy在下面讨论的内容。我希望在像我这样做研究时帮助其他遇到这个问题的人。我还使用了以下问题的答案来表达我的答案：滚动位置时显示Div。
0

小唯快跑啊

您可以编写这样的jQuery函数来确定元素是否在视口中。在包含jQuery之后将其包括在内：$.fn.isInViewport&nbsp;=&nbsp;function()&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;elementTop&nbsp;=&nbsp;$(this).offset().top; &nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;elementBottom&nbsp;=&nbsp;elementTop&nbsp;+&nbsp;$(this).outerHeight(); &nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;viewportTop&nbsp;=&nbsp;$(window).scrollTop(); &nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;viewportBottom&nbsp;=&nbsp;viewportTop&nbsp;+&nbsp;$(window).height(); &nbsp;&nbsp;&nbsp;&nbsp;return&nbsp;elementBottom&nbsp;>&nbsp;viewportTop&nbsp;&&&nbsp;elementTop&nbsp;<&nbsp;viewportBottom;};样品用法：$(window).on('resize&nbsp;scroll',&nbsp;function()&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;if&nbsp;($('#Something').isInViewport())&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//&nbsp;do&nbsp;something &nbsp;&nbsp;&nbsp;&nbsp;}&nbsp;else&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//&nbsp;do&nbsp;something&nbsp;else &nbsp;&nbsp;&nbsp;&nbsp;}});请注意，这仅检查元素的顶部和底部位置，而不检查元素是否水平位于视口之外。
0
打开App，查看更多内容
随时随地看视频慕课网APP

相关分类

JavaScript
JQuery