javascript - Jquery：如果列表元素离开屏幕，则隐藏它们

Question

我有一个图标列表，它将作为页面左侧的导航。导航设置为页面高度的 100%。

如果将来我希望向列表中添加更多图标并且它们最终离开页面，我希望隐藏重叠的图标并使用按钮来隐藏当前可见的 x 个图标并显示第二个 x 个图标。

基本上我现在的问题是：如果项目列表溢出屏幕，我怎样才能找到不适合的元素并隐藏它们？

Answer 1

你可以通过css来实现。它不会隐藏元素但不会显示在屏幕上，它比找到所有元素并隐藏它们要快：

.leftNav{
   height:80px;  
   overflow-y: hidden;
   border-style:solid;
   border-width:1px;
}

html:

<div class='leftNav'>
   <div>nav 1</div>
   <div>nav 2</div>
   <div>nav 3</div>
    .
    .
    .
</div>

工作演示

CSS：

  overflow-y: auto;

可用于显示滚动条的Demo

Answer 2

您可以获取一个元素offset()并将其与窗口的宽度进行比较。

例如，如果您有一个垂直的图标列表并且想知道它们是否可见：

$('nav a').each(function(index)() {
    if ($(this).offset().top > $(window).height()) {
        $(this).hide();
    }
});