问题描述
我需要使用jQuery检查DIV元素是否未脱离屏幕.元素是可见的,并根据CSS属性显示,但是可以通过以下方式有意地将其放置在屏幕外:
I need to check with jQuery if a DIV element is not falling off-screen. The elements are visible and displayed according CSS attributes, but they could be intentionally placed off-screen by:
position: absolute;
left: -1000px;
top: -1000px;
我不能使用jQuery :visible
选择器,因为元素的高度和宽度不为零.
I could not use the jQuery :visible
selector as the element has a non-zero height and width.
我什么都没做.这种绝对位置放置是我的 Ajax 框架实现某些小部件的隐藏/显示的方式.
I am not doing anything fancy. This absolute position placement is the way my Ajax framework implements the hide/show of some widgets.
推荐答案
取决于您对屏幕外"的定义.是在视口内还是在页面的定义边界内?
Depends on what your definition of "offscreen" is. Is that within the viewport, or within the defined boundaries of your page?
使用 Element.getBoundingClientRect(),您可以轻松地检测是否您的元素位于视口的边界内(即屏幕上或屏幕外):
Using Element.getBoundingClientRect() you can easily detect whether or not your element is within the boundries of your viewport (i.e. onscreen or offscreen):
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)
);
};
然后您可以通过多种方式使用它:
You could then use that in several ways:
// returns all elements that are offscreen
$(':offscreen');
// boolean returned if element is offscreen
$('div').is(':offscreen');
这篇关于如何检查元素是否在屏幕外的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!