如何检查元素是否在屏幕外

我需要使用 jQuery 检查 DIV 元素是否没有脱离屏幕。这些元素是可见的，并根据 CSS 属性显示，但可以通过以下方式故意将它们放置在屏幕外：

position: absolute; 
left: -1000px; 
top: -1000px;

我无法使用 jQuery:visible选择器作为元素具有非零的高度和宽度。

我没有做任何花哨的事情。这种绝对位置放置是我的方式Ajax框架实现了一些小部件的隐藏/显示。

取决于你对“屏幕外”的定义是什么。它是在视口内还是在页面定义的边界内？

Using 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');