HTML style =“overflow：hidden”访问内部溢出JavaScript / jQuery的元素？

I have a <div> that has style="overflow:hidden" and the <body> is a fixed size, the idea for it is to be a multi-screen display with no UI.

我有一个

，它有style =“overflow：hidden”，而是一个固定的大小，它的想法是一个没有UI的多屏幕显示。

Is there a way to access these "non-visible" elements to know which is the first element that doesn't fit on the page?

有没有办法访问这些“不可见”元素，以了解哪个是第一个不适合页面的元素？

I'm sure its probably something very simple, but I'm new to html and JavaScript so it makes searching for things difficult.

我确定它可能非常简单，但我是html和JavaScript的新手，所以它使搜索难度很大。

4 个解决方案

#1

You can use that plugin https://github.com/teamdf/jquery-visible/.

您可以使用该插件https://github.com/teamdf/jquery-visible/。

To check if an element is visible:

要检查元素是否可见：

$('element').visible();

To get all elements instead of testing one you could do something like that:

要获得所有元素而不是测试一个，你可以做类似的事情：

$('elements').filter(function( index ) { return $(this).visible(); });

#2

If you don't wanna use a jQuery plugin (answer provided Joanvo), you can use this way, answered on SO : How to tell if a DOM element is visible in the current viewport?

如果您不想使用jQuery插件（答案提供Joanvo），您可以使用这种方式，在SO上回答：如何判断DOM元素在当前视口中是否可见？

It's pretty much the same.

它几乎是一样的。

Note that getBoundingClientRect() became the best pratice to get viewport dimensions.

请注意，getBoundingClientRect（）成为获取视口尺寸的最佳实践。

#3

Yes there is a way

是的，有办法

var winHeight = $(window).height();

var firstElement = null;
function findFirstHiddenElement(ele)
{
  if(firstElement != null) return;
  if(ele.offset().top>winHeight){ 
    firstElement = ele;
    return true;
  }
  else{
    ele.children().each(function(){
      if(firstElement != null) return false;
    if($(this).children().length>0)  findFirstHiddenElement($(this));
   });
  }
}

$(document).ready(function(){
   findFirstHiddenElement($("body"));
});

#4

-3

you can try this code

你可以试试这段代码

var hiddenElements = $( "body" ).find( ":hidden" );

in some browser scripts are hidden elements for that

在某些浏览器脚本中是隐藏的元素

var hiddenElements = $( "body" ).find( ":hidden" ).not( "script" );

oki now I understood.

oki现在我明白了。

I think the top of overflow:hidden element is compare with body height then its possible to group all the hidden elements. try this. change as per your needs

我认为溢出的顶部：隐藏元素与身高相比，然后可以将所有隐藏元素分组。尝试这个。根据您的需要改变

var bodyHeight = $("body").height();
var hiddenElments = new Array();

$("body").find("*").each(function(){
    if ($(this).position().top > h)
        hiddenEls.push($(this));
});

#1