隐藏列表元素，如果他们离开屏幕

Jquery: Hide list elements if they go off the screen

本文关键字：离开 屏幕 他们 如果 列表元素 隐藏      更新时间：2023-09-26

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

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

基本上我现在的问题是:如果项目列表溢出屏幕，我如何找到不适合的元素并隐藏它们?

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

例如，如果你有一个垂直的图标列表，想知道它们是否可见:

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

可以通过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

相关文章：