Javascript 如何选择在视口中占据更多空间的div

形势-

我的文档中有大量的块元素

div

。它们中的每一个都相对对齐

我想选择一个在视口中占据比滚动上的同级块更多空间的块

在图像中看到-

我试过了-

$(window).scroll(function(){
  $('.container div').each(function(){
      if(isVisible($(this), $(window))){
      console.log($(this).attr('class')+" is visible");
      };  
  });
});

计算

偏移量

function isVisible( block, container ){

    var elementTop = $(block).offset().top,
        elementHeight = $(block).height(),
        containerTop = container.scrollTop(),
        containerHeight = container.height();

    return ((((elementTop - containerTop) + elementHeight) > 0) && ((elementTop - containerTop) < containerHeight));
}

函数可见（块、容器）{
var elementTop=$（块）.offset（）.top，
elementHeight=$（块）.height（），
containerTop=container.scrollTop（），
containerHeight=container.height（）；
返回（（（elementTop-containerTop）+elementHeight）>0）和（（（elementTop-containerTop）

现在若你们在控制台中注意到，我正在显示屏幕上可见的块。现在，当两个或多个块在屏幕上可见时，只有一个块在视口中占据更多空间

目前，它正在选择两个块。我不知道我现在该怎么处理它

---

在这里，您会发现小提琴-

您遇到的问题的基本部分是，您试图确定最可视的项目，但您只检查每个元素的可见性。相反，您需要能够比较每个块占用的可视空间的百分比，并找到最大值。从概念上看，这是

对于每个元素，获取所占百分比

比较每个百分比，保留占空间百分比较大的百分比

在元素序列的末尾，您拥有最大值并执行所需操作

以一种更具功能性的伪代码的方式，我认为这类似于

elements.map( e => (e, percentTaken(e)).fold(None)((max, ep) => if (max == None or max.percent < ep.percent) ep else max))

elements.map（e=>（e，所占百分比（e））.fold（无）（（max，ep）=>if（max==None或max.percent

下面是我如何解决这一问题的细节。我认为这会给你你想要的，但可能会使用一些清理，使其更具习惯性，以及使百分比更干净的逻辑

---

最可见=？请提供实体定义。获取屏幕X的可见部分，Y到X+可见宽度，Y+可见高度通过所有可见元素循环查找其X、Y和X+宽度，Y+高度区域，并计算与屏幕可见部分（视口）重叠的区域。如果可见元素彼此重叠，则对每个元素执行相同的检查，如果重叠区域的z索引低于其他重叠元素，则对其进行否定。我想现在有人可以把这个编码成答案了。当然，所有这些都必须在pagescroll或其他东西上进行计算。上图中的绿色块比下图中的更可见，我想选择那个绿色块。反之亦然，紫色的。这不是一个可靠的定义。什么意思更明显？在视口中占据更多空间的那个？（这是我在之前的评论中所假设的）@KatrinRaimond，没错！