如何检查一个元素是否关闭
如果DIV元素没有脱离屏幕,我需要使用jQuery进行检查。 元素是可见的,并根据CSS属性显示,但可以通过以下方式故意将其放置在屏幕外:
position: absolute;
left: -1000px;
top: -1000px;
我无法使用jQuery :visible
选择器,因为元素的高度和宽度都不为零。
我没有做任何事情。 这种绝对位置放置是我的Ajax框架实现隐藏/显示一些小部件的方式。
取决于你的“屏外”定义。 是在视口内还是在页面的已定义边界内?
使用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');
这里有一个jQuery插件,它允许用户测试一个元素是否落入浏览器的可见视口中,并将浏览器的滚动位置考虑在内。
$('#element').visible();
您还可以检查部分可见性:
$('#element').visible( true);
一个缺点是,它只适用于垂直定位/滚动,但它应该很容易将水平定位添加到混合中。
无需插件来检查是否在视图端口之外。
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))
}
});
链接地址: http://www.djcxy.com/p/267.html