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

Question

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

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

我无法使用 jQuery :visible 选择器，因为该元素的高度和宽度都不为零。

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

Answer 1

取决于您对“屏幕外”的定义。它是在视口(viewport)内，还是在页面定义的边界内？

使用 Element.getBoundingClientRect()您可以轻松检测您的元素是否在视口(viewport)的边界内(即屏幕上或屏幕外):

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