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

如果DIV元素没有脱落，我需要用jQuery来检查。 这些元素是可见的，并根据CSS属性显示，但他们可以故意放置在屏幕外：

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

我不能使用jQuery :visibleselect器，因为元素具有非零的高度和宽度。

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

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

Answer 2

这里有一个jQuery插件，它允许用户testing一个元素是否落在浏览器的可见视口中，并将浏览器的滚动位置考虑在内。

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

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

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

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

Answer 3

不需要插件来检查是否在视图端口之外。

 var w = Math.max(document.documentElement.clientWidth, window.innerWidth || 0) var h = Math.max(document.documentElement.clientHeight, window.innerHeight || 0) var d = $(document).scrollTop(); $.each($("div"),function(){ p = $(this).position(); //vertical if (p.top > h + d || p.top > h - d){ console.log($(this)) } //horizontal if (p.left < 0 - $(this).width() || p.left > w){ console.log($(this)) } }); 

Answer 4

我创build了一个小插件来实现这一点 ，它有一些灵活的选项（当您调整浏览器窗口的大小时也是如此）。

Answer 5

我知道这是晚了，但这个插件应该工作。 http://remysharp.com/2009/01/26/element-in-view-event-plugin/

 $('p.inview').bind('inview', function (event, visible) { if (visible) { $(this).text('You can see me!'); } else { $(this).text('Hidden again'); } 

Answer 6

那么…我在这里提出的每个解决scheme中都发现了一些问题。

• 您应该能够select是否要将整个元素放在屏幕上或其任何部分
• 如果元素比窗口更高/更宽，则提议的解决scheme会失败，并且还会覆盖浏览器窗口。

这里是我的解决scheme，包括jQuery .fn实例函数和expression 。 我在函数中创build了比我更多的variables，但是对于复杂的逻辑问题，我喜欢把它分成更小的，明确命名的部分。

我使用的getBoundingClientRect方法返回相对于视口的元素位置， 所以我不需要关心滚动位置

用途 ：

 $(".some-element").filter(":onscreen").doSomething(); $(".some-element").filter(":entireonscreen").doSomething(); $(".some-element").isOnScreen(); // true / false $(".some-element").isOnScreen(true); // true / false (partially on screen) $(".some-element").is(":onscreen"); // true / false (partially on screen) $(".some-element").is(":entireonscreen"); // true / false 

来源 ：

 $.fn.isOnScreen = function(partial){ //let's be sure we're checking only one element (in case function is called on set) var t = $(this).first(); //we're using getBoundingClientRect to get position of element relative to viewport //so we dont need to care about scroll position var box = t[0].getBoundingClientRect(); //let's save window size var win = { h : $(window).height(), w : $(window).width() }; //now we check against edges of element //firstly we check one axis //for example we check if left edge of element is between left and right edge of scree (still might be above/below) var topEdgeInRange = box.top >= 0 && box.top <= win.h; var bottomEdgeInRange = box.bottom >= 0 && box.bottom <= win.h; var leftEdgeInRange = box.left >= 0 && box.left <= win.w; var rightEdgeInRange = box.right >= 0 && box.right <= win.w; //here we check if element is bigger then window and 'covers' the screen in given axis var coverScreenHorizontally = box.left <= 0 && box.right >= win.w; var coverScreenVertically = box.top <= 0 && box.bottom >= win.h; //now we check 2nd axis var topEdgeInScreen = topEdgeInRange && ( leftEdgeInRange || rightEdgeInRange || coverScreenHorizontally ); var bottomEdgeInScreen = bottomEdgeInRange && ( leftEdgeInRange || rightEdgeInRange || coverScreenHorizontally ); var leftEdgeInScreen = leftEdgeInRange && ( topEdgeInRange || bottomEdgeInRange || coverScreenVertically ); var rightEdgeInScreen = rightEdgeInRange && ( topEdgeInRange || bottomEdgeInRange || coverScreenVertically ); //now knowing presence of each edge on screen, we check if element is partially or entirely present on screen var isPartiallyOnScreen = topEdgeInScreen || bottomEdgeInScreen || leftEdgeInScreen || rightEdgeInScreen; var isEntirelyOnScreen = topEdgeInScreen && bottomEdgeInScreen && leftEdgeInScreen && rightEdgeInScreen; return partial ? isPartiallyOnScreen : isEntirelyOnScreen; }; $.expr.filters.onscreen = function(elem) { return $(elem).isOnScreen(true); }; $.expr.filters.entireonscreen = function(elem) { return $(elem).isOnScreen(true); }; 

Answer 7

• 获取给定元素顶部的距离
• 添加相同给定元素的高度。 这将告诉你从屏幕的顶部到给定元素的结尾的总数。

• 然后你所要做的就是从文档总高度中减去这个值

   jQuery(function () { var documentHeight = jQuery(document).height(); var element = jQuery('#you-element'); var distanceFromBottom = documentHeight - (element.position().top + element.outerHeight(true)); alert(distanceFromBottom) }); 

Answer 8

您可以使用$(div).position()检查div的位置，并检查左边距和上边距属性是否小于0：

 if($(div).position().left < 0 && $(div).position().top < 0){ alert("off screen"); }