Javascript 响应导航溢出

当锚超出较小移动设备的屏幕大小时，我很难弄清楚如何使导航列表项滚动。我已经尝试过使用overflow-y:auto（和scroll）来修复这个问题，但运气不好。我试图修改代码，添加固定高度和溢出属性。有什么建议吗

.topnav{
溢出：隐藏；
背景色：#F4；
位置：固定；
排名：0；
}
.topnav a{
浮动：左；
显示：块；
颜色：#212414；
文本对齐：居中；
填充：20px；
文字装饰：无；
字体大小：16px；
}
.主动{
背景色：#DAD38B；
颜色：#ffffff；
}
.topnav.icon{
显示：无；
}
.下拉列表{
浮动：对；
溢出：隐藏；
}
.下拉菜单{
字体大小：16px；
边界：无；
大纲：无；
颜色：白色；
填充：14px 16px；
背景色：继承；
字体家族：继承；
保证金：0；
}
.下拉内容{
显示：无；
位置：绝对位置；
背景色：#F4；
最小宽度：160px；
盒影：0px 8px 16px 0px rgba（0,0,0,0.2）；
z指数：1；
}
.下拉内容a{
浮动：无；
颜色：黑色；
填充：12px 16px；
文字装饰：无；
显示：块；
文本对齐：左对齐；
}
.topnav a:悬停，.dropdown:悬停.dropbtn{
背景色：#C2B78F；
颜色：白色；
}
.下拉列表内容a：悬停{
背景色：#ddd；
颜色：黑色；
}
.下拉：悬停.下拉内容{
显示：块；
}
@媒体屏幕和屏幕（最大宽度：600px）{
.topnav a:不是（：第一个孩子），.dropdown.dropbtn{
显示：无；
}
.topnav a.icon{
浮动：左；
显示：块；
}
.topnav.responsive{位置：固定；}
.topnav.responsive.icon{
位置：相对位置；
排名：0；
}
.topnav.a{
浮动：无；
显示：块；
文本对齐：居中；
填充：20px 40px；
}
.topnav.responsive.dropdown{float:none；}
.topnav.responsive.下拉列表内容{位置：固定；}
.topnav.responsive.dropdown.dropbtn{
显示：块；
宽度：100%；
文本对齐：左对齐；
}
}
@媒体屏幕和屏幕（最小宽度：600px）{
托普纳夫先生{
溢出：隐藏；
背景色：#F4；
位置：相对位置；
}
.topnav.responsive{位置：相对；}
.topnav.responsive.icon{
位置：绝对位置；
右：0；
排名：0；
}
.topnav.a{
浮动：无；
显示：块；
文本对齐：居中；
}
.topnav.responsive.dropdown{float:none；}
.topnav.responsive.下拉列表内容{位置：相对；}
.topnav.responsive.dropdown.dropbtn{
显示：块；
宽度：100%；
文本对齐：左对齐；
}
}

函数myFunction（）{
var x=document.getElementById（“myTopnav”）；
如果（x.className==“topnav”）{
x、 类名+=“响应”；
}否则{
x、 className=“topnav”；
}
} 

溢出：滚动css样式仅在包含的元素不够宽或不够高，无法显示其中的所有信息时才放置滚动条。这意味着如果一个div只能有200px的高度，但是里面的内容需要300px的高度才能显示，那么就会有一个滚动条

这不适用于您的.topnav元素，因为它的高度足以显示内容，因为它超出了屏幕的高度，这意味着溢出滚动样式不会被激活，因为从技术上讲，div的高度足以显示所有内容，即使您看不到它。如果您阻止元素延伸通过可见屏幕，并阻止其变高，那么屏幕的高度任何不适合的内容都会因此使样式创建滚动条

下面“我的样式”中的“最大高度”属性可确保fixed.topnav元素的高度不会超过屏幕大小，这将使任何不适合的内容通过滚动显示

.topnav {
    overflow-y: scroll;
    max-height: 100vh;
    background-color: #f4f4f4;
    position: fixed;
    top: 0;
}

---

overflow-y：滚动

也会将滚动条样式添加到collapes菜单按钮。您需要使用

oberflow-y:auto以及
最大高度：100vh将为扩展菜单添加滚动条。为了演示，我在下面的代码片段中添加了额外的菜单项


.topnav{
溢出y：自动；
背景色：#F4；
位置：固定；
排名：0；
最大高度：100vh；
}
.topnav a{
浮动：左；
显示：块；
颜色：#212414；
文本对齐：居中；
填充：20px；
文字装饰：无；
字体大小：16px；
}
.主动{
背景色：#DAD38B；
颜色：#ffffff；
}
.topnav.icon{
显示：无；
}
.下拉列表{
浮动：对；
溢出：隐藏；
}
.下拉菜单{
字体大小：16px；
边界：无；
大纲：无；
颜色：白色；
填充：14px 16px；
背景色：继承；
字体家族：继承；
保证金：0；
}
.下拉内容{
显示：无；
位置：绝对位置；
背景色：#F4；
最小宽度：160px；
盒影：0px 8px 16px 0px rgba（0,0,0,0.2）；
z指数：1；
}
.下拉内容a{
浮动：无；
颜色：黑色；
填充：12px 16px；
文字装饰：无；
显示：块；
文本对齐：左对齐；
}
.topnav a:悬停，.dropdown:悬停.dropbtn{
背景色：#C2B78F；
颜色：白色；
}
.下拉列表内容a：悬停{
背景色：#ddd；
颜色：黑色；
}
.下拉：悬停.下拉内容{
显示：块；
}
@媒体屏幕和屏幕（最大宽度：600px）{
.topnav a:不是（：第一个孩子），.dropdown.dropbtn{
显示：无；
}
.topnav a.icon{
浮动：左；
显示：块；
}
.topnav.responsive{位置：固定；}
.topnav.responsive.icon{
位置：相对位置；
排名：0；
}
.topnav.a{
浮动：无；
显示：块；
文本对齐：居中；
填充：20px 40px；
}
.topnav.re