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

Question

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

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

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

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

原文由 Max 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

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

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

原文由 scurker 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

这里有一个 jQuery 插件，允许用户测试元素是否落在浏览器的可见视口内，同时考虑浏览器的滚动位置。

 $('#element').visible();

您还可以检查部分可见性：

 $('#element').visible( true);

一个缺点是它只适用于垂直定位/滚动，尽管将水平定位添加到组合中应该很容易。

原文由 Sam Sehnert 发布，翻译遵循 CC BY-SA 3.0 许可协议