Javascript 向动态ulli添加滚动条

我搜索了很多帖子和论坛，因为我认为这可能是一个基本的东西，但没有发现它这么问这里，所有我试图做的是添加滚动条，如果高度超过一定的限制，让我们说，如果菜单项超过3

我已经创建了一个JSFIDLE

如果您无法访问它，那么这里是HTML和CSS HTML

有几件事

首先，您没有为无序列表指定高度。如果不定义元素的高度，就永远看不到滚动条。元素将根据其内容调整其大小

另外，如果要防止UL的内容水平溢出元素，请将overflow-x CSS3属性设置为hidden

我想你需要的是：

#mnav li ul {
    display: block;
    z-index: 9999;
    position: absolute;
    left: -999em;
    width: 400px;
    margin: 0px;
    border: 1px solid #ddd;
    overflow-x:hidden;
    height:50px;
}

---

希望这有帮助

如果您有可预测的列表项高度，那么这相当简单。考虑下面的例子：

这是选项一
这是第二种选择
我们需要三个
现在这些都看不见了
我是最后的选择

这里我们有五个项目的清单。我将指示每个列表项本身具有

字体大小

和

行高

为

1em

，顶部和底部填充

.25em

：

。子菜单li{
字号：1em；
填充物：25em 1em；
线高：1米；
}

现在我们知道每个列表项都是

1.5em

高的。因此，我们现在可以在父元素上设置

max height

，使其一次仅显示三个列表项：

。子菜单{
填充：0；
最大高度：4.5em；/*1.5x3*/
溢出y：自动；
}

结果是：

---

在线演示：

我对您的原始样式表做了一些调整，现在它将显示滚动条，但仅当滚动条超过3个列表项的高度时（本例中为63像素）。以下是最终的CSS代码：

#mnav {
    margin-left: -30px;
    margin-right: -30px;
}
#mnav li {
    float: left;
    list-style: none;
    margin:0 10px;/*Keeping 10px space between each nav element*/
}
#mnav li a,/*These can all be merged into a single style*/
#mnav li a:link,
#mnav li a:visited,
#mnav li a:hover,
#mnav li a:active {
    text-decoration: none;
}
#mnav li ul {
    display: none;/*This is the default state.*/
    z-index: 9999;
    position: absolute;
    width: 400px;
    max-height:63px;/*The important part*/
    overflow-y:auto;/*Also...*/
    overflow-x:hidden;/*And the end of the important part*/
    margin: 0px;
    padding-left:5px;/*Removing the large whitespace to the left of list items*/
    border: 1px solid #ddd;
}
#mnav li:hover ul, #mnav li.sfhover ul {
    display:block;/*This is the hovered state*/
}
#mnav li ul li a, #mnav li ul li a:link, #mnav li ul li a:visited {
    display: block;
    margin: 0;
    text-decoration: none;
    z-index: 9999;
    border-bottom: 1px dotted #ccc;
    width:400px;
}
#mnav li ul li a:hover, #mnav li ul li a:active {
    display: block;
    margin: 0;
    text-decoration: none;
}

。出于演示目的，我还将另外两个

元素插入到主页和SQL Server vs Oracle项目中。主页项将显示当列表项少于3个时弹出窗口的行为

要解释每个更改的位，首先是实际执行该技巧的代码：

• 将

  max height

  定义为63将使ul在低于63px high时正常工作，但如果超过63px high，则会溢出并显示滚动条。如果要显示更多项目，只需将

  max height

  增加到所需高度即可。目前每个项目的高度是21px，所以我用它来获得3个项目的63px
• 由于溢出仅显示垂直方向的滚动条，因此只有

  overflow-y:auto

  应该在那里，并且

  overflow-x:hidden

  可以防止在水平方向上出现滚动条

然后我做了其他一般性的改变：

• 我在项目之间添加了20px的边距（元素两边都是10px），以使列表在这里看起来更好一些。你可能想应用你自己的风格，这只是为了这个演示
• 我已将您的隐藏技术从“将其推到左侧的

  -999em

  ”更改为通过

  display:none

  隐藏它。这是更好的处理方法，因为

  display:none

  的元素不会在搜索引擎中呈现，因此这在这些情况下会有所帮助。总的来说，我认为用

  display:none

  隐藏东西比把它从屏幕上推开要好，因为它实际上还在屏幕上
• 我已经删除了

  ul

  左侧的填充，因为它看起来很糟糕。如果不将默认填充用于虚线/数字列表，则无需使用默认填充

---

考虑到您对Zachary Carter答案的评论，这也应该有效，因为如果您将

最大高度
定义为210px（10个项目），这不会显示一个巨大的白色框。
从我的小提琴中可以看出，我有多个菜单项和子类别，您能为ul的多个级别实现上述功能吗li@sam当你说“多层次，“您是说子菜单中的子菜单吗？我在你的例子中看不到。我说的是多个主菜单和子菜单，但子菜单只有在我们悬停主菜单时才会打开，这就是我试图在我的菜单中实现你的代码的方式，但它提供了一个额外的水平滚动条，所以希望你帮助我实现你的代码s@sam我在视口中看到一个额外的滚动条；这就是你所说的，对吗？是的，这是正确的，如果有其他方法，请重写CSS，如果我删除宽度，请参考：500px；从“#mnav li ul li a，#mnav li ul li a:link，#mnav li ul li”开始，真正的滚动条消失了，但SSIS选项卡（第三个选项卡）的子菜单项彼此相邻，而不是Stack。我只是以3为例，但我确实想要10个项，然后滚动，我试图实现高度，但它不起作用，因为如果一个选项卡中的项目很少，那么它会为该选项卡创建一个大的空白框，而且它看起来不漂亮。我不知道为什么你会对我的答案投反对票，因为它看起来不漂亮。你没有问如何让它看起来漂亮。你问我如何让你的元素显示一个滚动条，我回答你一个完全可行的解决方案。如果你想让它看起来漂亮，那么在你将来的问题中解释一下。仅供参考，其他人降低了你的回答当我发布这个问题时，我想知道一定有像max height这样的东西，这正是我正在搜索的，我相信这个答案会帮助很多像我这样的人谢谢
#mnav li ul {
    display: block;
    z-index: 9999;
    position: absolute;
    left: -999em;
    width: 400px;
    margin: 0px;
    border: 1px solid #ddd;
    overflow-x:hidden;
    height:50px;
}

#mnav {
    margin-left: -30px;
    margin-right: -30px;
}
#mnav li {
    float: left;
    list-style: none;
    margin:0 10px;/*Keeping 10px space between each nav element*/
}
#mnav li a,/*These can all be merged into a single style*/
#mnav li a:link,
#mnav li a:visited,
#mnav li a:hover,
#mnav li a:active {
    text-decoration: none;
}
#mnav li ul {
    display: none;/*This is the default state.*/
    z-index: 9999;
    position: absolute;
    width: 400px;
    max-height:63px;/*The important part*/
    overflow-y:auto;/*Also...*/
    overflow-x:hidden;/*And the end of the important part*/
    margin: 0px;
    padding-left:5px;/*Removing the large whitespace to the left of list items*/
    border: 1px solid #ddd;
}
#mnav li:hover ul, #mnav li.sfhover ul {
    display:block;/*This is the hovered state*/
}
#mnav li ul li a, #mnav li ul li a:link, #mnav li ul li a:visited {
    display: block;
    margin: 0;
    text-decoration: none;
    z-index: 9999;
    border-bottom: 1px dotted #ccc;
    width:400px;
}
#mnav li ul li a:hover, #mnav li ul li a:active {
    display: block;
    margin: 0;
    text-decoration: none;
}