如何选择，在视口中

我有块元素div(s)在我的文档的数量。它们中的每一个都相对对齐。

我想选择一个占据更多的视口空间比滚动上的兄弟块。

查看图像 -

enter image description here

我tried-

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

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

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

这里您可以找到fiddle- https://jsfiddle.net/13odrk4t/

来源

2015-04-03 Manoj

最可见=？请提供**固体**定义。 – Sharky 2015-04-03 12:02:55

获得屏幕X的可见部分，Y到X + visible_width，Y + visible_height遍历所有可见元素找到它们的X，Y和X +宽度，Y +高度区域，并计算与屏幕可见部分重叠的区域视口）。如果可见元素彼此重叠，则对每个元素进行相同的检查，并且如果它具有比其他重叠元素低的z-索引则取消重叠区域。现在有人可以将其编码为我想的答案。当然这一切都必须在pagescroll或其他东西上计算。 – Sharky 2015-04-03 12:06:47

上图中绿色的块比下面的块更明显，我想选择那个绿色块。反之亦然紫色。 – Manoj 2015-04-03 12:06:49

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

对于每一个元素得到采取的百分比高达
比较每个百分点，保持了一个占用空间
的更多比例在你的元素序列的结束最大的价值，并做你需要的。

在功能更强大的伪代码方式，我认为这有点像

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/

来源

2015-04-03 12:31:54

谢谢你@Craig Suchanec，太棒了！ – Manoj 2015-04-03 12:49:21

如何选择，在视口中

回答

相关问题