我有一个包含内联列表项的列表。我可以看到大约 8 个，但没有足够的空间来显示更多，其余部分显示在下一行，由于其 overflow:hidden 而隐藏(在容器的 z-index 后面)。我如何使用 JavaScript 计算这些下一个订单项？
我知道 jQuery 有 $('li:visible') 但我需要一个普通的 JavaScript 方式。
我尝试利用 getComputedStyle(el) 但似乎没有任何方法可以定位这些隐藏的元素。
还有一个复杂的Page Visibility API但我认为它不能用于元素，只能用于文档可见性。
这是一个 JSFiddle列表项的数量
最佳答案
对于您的情况，您需要确定 LI 的顶部是否在 UL 的“折叠之下”。为此，我们可以使用 element.getBoundingClientRect():
function isVis(elm){
var box = elm.getBoundingClientRect(),
par = elm.parentNode.getBoundingClientRect();
return par.bottom-par.top>= box.top;
}
现场演示: https://jsfiddle.net/ntcsh18g/
请注意，这不是通用的“元素是否隐藏”例程，它既复杂又缓慢，而是针对导致“隐藏”的 OP 属性的简单检查...
关于javascript - 计算列表中隐藏的下一行元素，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/46478808/