如何检查一个元素是否关闭

如果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

上一篇: How to check if an element is off

下一篇: Turning two elements visible/hidden in the same div