如果 DIV 元素没有脱离屏幕,我需要使用 jQuery 检查。这些元素是可见的并根据 CSS 属性显示,但可以通过以下方式有意将它们放置在屏幕外:
position: absolute;
left: -1000px;
top: -1000px;
我无法使用 jQuery :visible
选择器,因为该元素的高度和宽度都不为零。
我没有做任何花哨的事情。这个绝对位置放置是我的方式 Ajax框架实现了一些小部件的隐藏/显示。
最佳答案
取决于您对“屏幕外”的定义。它是在视口(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');
关于javascript - 如何检查元素是否在屏幕外,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/8897289/