Question

我的<div> style="overflow:hidden" <body>且{{1}}是固定大小，它的想法是没有用户界面的多屏幕显示。

有没有办法访问这些＆＃34;不可见＆＃34;元素知道哪个是第一个不适合页面的元素？

我确定它可能非常简单，但我是html和JavaScript的新手，所以它会让搜索变得困难。

Answer 1

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

检查元素是否可见：

$('element').visible();

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

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

Answer 2

如果您不想使用jQuery插件（答案提供Joanvo），您可以使用这种方式，在SO上回答： How to tell if a DOM element is visible in the current viewport?

它几乎一样。

请注意getBoundingClientRect()成为获取视口尺寸的最佳实践。

Answer 3

是的，有办法

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"));
});

Answer 4

你可以试试这段代码

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

某些浏览器脚本中的

是该

的隐藏元素

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

oki现在我明白了。

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

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

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

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

4 个答案: