Javascript 滚动覆盖的内容

目标：
大内容需要滚动

问题：
我不知道如何创建它有一个滚动，你可以滚动时，内容很长

谢谢大家!

函数openNav（）{ document.getElementById（“myNav”）.style.height=“100%”； $（'body'）.addClass（'noscroll'）； } 函数closeNav（）{ document.getElementById（“myNav”）.style.height=“0%”； $（'body'）.removeClass（'noscroll'）； }

正文{
保证金：0；
字体系列：“Lato”，无衬线；
}
.覆盖{
身高：0%；
宽度：100%；
位置：固定；
z指数：1；
排名：0；
左：0；
背景色：rgb（0,0,0）；
背景色：rgba（0,0,0,0.8）；
溢出y：隐藏；
过渡：0.5s；
}
.覆盖内容{
位置：相对位置；
排名前10%；
宽度：70%；
文本对齐：左对齐；
保证金：30像素自动；
背景：白色；
溢出y：滚动；
}
.覆盖{
填充：8px；
文字装饰：无；
字体大小：36px；
颜色：#818181；
显示：块；
过渡：0.3s；
}
.overlay a:悬停，.overlay a:焦点{
颜色：#f1f1；
}
.overlay.closebtn{
位置：绝对位置；
顶部：20px；
右：45px；
字体大小：60px；
}
.诺斯克罗尔{
溢出：隐藏；
}

全屏覆盖导航示例
单击下面的元素打开全屏覆盖导航菜单

在本例中，导航菜单将从顶部向下滑动：





























































































































































☰ 打开

添加高度

.overlay-content {
    height: 85%;
}

---

为此，您需要一些高度：

.overlay-content {
    height: 80vh;
}

---

您需要为覆盖内容设置一个高度，以便它知道溢出是什么，同时我会将其从“滚动”更改为“自动”，以便滚动条仅在需要时显示：

.overlay-content {
    overflow-y: auto;
    height: 100%;
}

更新的代码片段：

函数openNav（）{ document.getElementById（“myNav”）.style.height=“100%”； $（'body'）.addClass（'noscroll'）； } 函数closeNav（）{ document.getElementById（“myNav”）.style.height=“0%”； $（'body'）.removeClass（'noscroll'）； }

正文{
保证金：0；
字体系列：“Lato”，无衬线；
}
.覆盖{
身高：0%；
宽度：100%；
位置：固定；
z指数：1；
排名：0；
左：0；
背景色：rgb（0,0,0）；
背景色：rgba（0,0,0,0.8）；
溢出y：隐藏；
过渡：0.5s；
}
.覆盖内容{
位置：相对位置；
排名前10%；
宽度：70%；
文本对齐：左对齐；
保证金：30像素自动；
背景：白色；
溢出y：自动；
身高：100%；
}
.覆盖{
填充：8px；
文字装饰：无；
字体大小：36px；
颜色：#818181；
显示：块；
过渡：0.3s；
}
.overlay a:悬停，.overlay a:焦点{
颜色：#f1f1；
}
.overlay.closebtn{
位置：绝对位置；
顶部：20px；
右：45px；
字体大小：60px；
}
.诺斯克罗尔{
溢出：隐藏；
}

全屏覆盖导航示例
单击下面的元素打开全屏覆盖导航菜单

在本例中，导航菜单将从顶部向下滑动：





























































































































































☰ 打开

谢谢您的帮助！带有过度滚动的网站代码不起作用-不客气-起作用了吗？我不确定，因为你的评论说有些东西没有。我尝试了“.overlay内容{overflow-y:auto；height:100%；}”，它可以工作。谢谢你们的帮助！