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

Question

场合 -

我的文档中有多个块元素div(s)。其中每一个都是相对对齐的。

我想选择在视口中占用更多空间的那个，而不是在滚动时占用兄弟块。

见图片 -

我试过了 -

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

正在计算 offset

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

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

目前，它正在选择两个块。我现在不知道如何处理它。

在这里您可以找到小提琴 - https://jsfiddle.net/13odrk4t/

Answer 1

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

1. 为每个元素获取占用的百分比
2. 比较每个百分比，保持占据更多空间百分比的百分比
3. 在元素序列的最后，您拥有最大值并执行您需要的操作。

在一个更实用的伪代码方式中，我认为这就像

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

这是我如何解决它的小提琴。我认为它可以为您提供您想要的东西，但可能会使用一些清理工具来使其更具惯用性和使百分比更清洁的逻辑 https://jsfiddle.net/7s95a4nn/