如何使用jquery检查元素是否在用户的视图中
如何使用jquery检查元素是否在用户的视图中
提问于 2011-11-22 23:28:57
我的窗口中有一个非常大的可拖动的div。此div的窗口较小。
<div id="draggable-area" style="width:500px;height:500px;overflow:hidden">
<div id="draggable" style="width:5000px;height:5000px">
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
....
</ul>
</div>
</div> 如何知道li元素在用户视口中是否可见(我指的是真正可见，而不是在溢出区)？
回答 6
Stack Overflow用户
回答已采纳
发布于 2011-11-22 23:30:37
看一看this plugin
它为您提供了执行以下选择器的选项
$(":in-viewport")
$(":below-the-fold")
$(":above-the-top")
$(":left-of-screen")
$(":right-of-screen")Stack Overflow用户
发布于 2011-11-22 23:33:03
要检查元素是否在当前veiwport中，请执行以下操作：
function elementInViewport(el) {
var top = el.offsetTop;
var left = el.offsetLeft;
var width = el.offsetWidth;
var height = el.offsetHeight;
while(el.offsetParent) {
el = el.offsetParent;
top += el.offsetTop;
left += el.offsetLeft;
}
return (
top >= window.pageYOffset &&
left >= window.pageXOffset &&
(top + height) <= (window.pageYOffset + window.innerHeight) &&
(left + width) <= (window.pageXOffset + window.innerWidth)
);
}(Source)
对于更健壮的方法，我推荐使用Viewport Selectors，它允许您这样做：
$("#elem:in-viewport")Stack Overflow用户
发布于 2014-07-25 18:30:55
https://github.com/sakabako/scrollMonitor
var scrollMonitor = require("./scrollMonitor"); // if you're not using require, you can use the scrollMonitor global.
var myElement = document.getElementById("itemToWatch");
var elementWatcher = scrollMonitor.create( myElement );
elementWatcher.enterViewport(function() {
console.log( 'I have entered the viewport' );
});
elementWatcher.exitViewport(function() {
console.log( 'I have left the viewport' );
});
elementWatcher.isInViewport - true if any part of the element is visible, false if not.
elementWatcher.isFullyInViewport - true if the entire element is visible [1].
elementWatcher.isAboveViewport - true if any part of the element is above the viewport.
elementWatcher.isBelowViewport - true if any part of the element is below the viewport.页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/8229291
复制相关文章
相似问题