我需要和jQuery确认一下DIV元素是否没有从屏幕上掉下来。元素是可见的,并根据CSS属性显示,但可以通过以下方式有意将它们放在屏幕之外:
position: absolute;
left: -1000px;
top: -1000px;
我无法使用jQuery :visible
选择器,因为元素的高度和宽度都不为零。
我没有做任何花哨的事情。这种绝对位置放置是我的Ajax框架实现某些小部件隐藏/显示的方式。
发布于 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');
发布于 2012-10-16 05:50:11
有一个jQuery plugin here,允许用户测试一个元素是否落在浏览器的可视视区内,并考虑到浏览器的滚动位置。
$('#element').visible();
您还可以检查部分可见性:
$('#element').visible( true);
一个缺点是,它只适用于垂直定位/滚动,尽管将水平定位添加到混合中应该足够容易。
发布于 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))
}
});
https://stackoverflow.com/questions/8897289
复制相似问题