如何检查元素是否处于屏幕外
如何检查元素是否处于屏幕外
提问于 2012-01-17 23:31:32
我需要和jQuery确认一下DIV元素是否没有从屏幕上掉下来。元素是可见的，并根据CSS属性显示，但可以通过以下方式有意将它们放在屏幕之外：
position: absolute;
left: -1000px;
top: -1000px;我无法使用jQuery :visible选择器，因为元素的高度和宽度都不为零。
我没有做任何花哨的事情。这种绝对位置放置是我的Ajax框架实现某些小部件隐藏/显示的方式。
回答 5
Stack Overflow用户
回答已采纳
发布于 2012-01-17 23:53:02
这取决于你对“屏幕外”的定义。是在视区内，还是在页面定义的边界内？
使用Element.getBoundingClientRect()，您可以轻松地检测您的元素是否在视口的边界内(即屏幕上或屏幕外)：
jQuery.expr.filters.offscreen = function(el) {
var rect = el.getBoundingClientRect();
return (
(rect.x + rect.width) < 0
|| (rect.y + rect.height) < 0
|| (rect.x > window.innerWidth || rect.y > window.innerHeight)
);
};然后，您可以通过几种方式使用它：
// returns all elements that are offscreen
$(':offscreen');
// boolean returned if element is offscreen
$('div').is(':offscreen');Stack Overflow用户
发布于 2012-10-16 05:50:11
有一个jQuery plugin here，允许用户测试一个元素是否落在浏览器的可视视区内，并考虑到浏览器的滚动位置。
$('#element').visible();您还可以检查部分可见性：
$('#element').visible( true);一个缺点是，它只适用于垂直定位/滚动，尽管将水平定位添加到混合中应该足够容易。
Stack Overflow用户
发布于 2015-05-15 16:36:08
不需要一个插件来检查是否在视图端口之外。
var w = Math.max(document.documentElement.clientWidth, window.innerWidth || 0)
var h = Math.max(document.documentElement.clientHeight, window.innerHeight || 0)
var d = $(document).scrollTop();
$.each($("div"),function(){
p = $(this).position();
//vertical
if (p.top > h + d || p.top > h - d){
console.log($(this))
}
//horizontal
if (p.left < 0 - $(this).width() || p.left > w){
console.log($(this))
}
});页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/8897289
复制相关文章
相似问题
腾讯云开发者
