Question

我有一个内联列表项列表。我可以看到大约8但是没有足够的空间来显示更多，其余的显示在下一行，隐藏（在容器的z-index后面）因为overflow:hidden。如何使用JavaScript计算这些下一行项目？

我知道jQuery有$('li:visible')，但我需要一种普通的JavaScript方式。

我试图利用getComputedStyle(el)，但似乎没有任何方法来定位这些隐藏的项目。

还有一个复杂的Page Visibility API，但我认为它不能用于元素，只能用于文档的可见性。

此处列出了JSFiddle列表项

Answer 1

根据您的情况，如果LI的顶部是UL的“折叠”，则需要id。为此，我们可以使用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的属性进行简单检查，导致“隐藏”......

Answer 2

编辑：正如@dandavis所建议的那样，我的解决方案根本不是通用的（仅适用于一行元素），所以只能在非常具体和简单的情况下使用它！要概括这种方法，您可以尝试检查元素的offsetTop是否大于容器的高度，或者offsetLeft是否大于宽度。无论如何，你最好还是使用他的解决方案。 ;）

嗯，根据你的需要，一个非常丑陋但有效的解决方案可能是检查与第一个元素不同offsetTop的元素，如下所示：

const children = [...document.querySelectorAll('#container li')]
const normalOffset = children[0].offsetTop
const overflownChildren = children.filter(li => li.offsetTop !== normalOffset)

https://jsfiddle.net/Isti115/nc3tahw3/

Answer 3

您需要定位ul元素并将其保存到变量var lists = document.getElementsByTagName("ul");然后使用for循环，如下所示

<ul id="foo">
 <li>First</li>
 <li>Second</li>
 <li>Third</li>
</ul>


var lists = document.getElementsByTagName("ul");
for (var i = 0; i < lists.length; ++i) {
// filter so that only lists with the class "foo" are counted
 if (/(^|\\s)foo(\\s|$)/.test(lists[i].className)) {
    var items = lists[i].getElementsByTagName("li");
    for (var j = 0; j < items.length; ++j) {
        // do something with items[j]
    }
 }
}

计算列表中隐藏的下一行项

3 个答案: