允许滚动固定父元素的绝对子元素

Question

我有一个固定的header 元素。在元素中，有一个下拉列表nav，它绝对位于标题下方。我实现了下拉功能以使其显示，但是，是否有可能滚动 nav 而 header 保持固定？我发现nav 变得相当大，无法滚动。

我目前的进度：

window.onload = function() {
    var menuBtn = document.getElementById("menu-icon"),
        navbar = document.getElementById("navbar"),
        header = document.getElementById("header");
    
    menuBtn.addEventListener('click', toggleMenu);
 
    function toggleMenu(){
        menuBtn.classList.toggle("active");
        navbar.style.maxHeight = navbar.style.maxHeight ? null : navbar.scrollHeight + "px";
    }
}

header {
    background:#ddd;
    position: fixed;
    height: 45px;
    top: 0;
    width: 100vw;
    z-index: 500;
}

nav{
    overflow: auto;
    background: #fff;
    position: absolute;
    left: 0;
    top: 45px;
    transition: all 0.3s;
    max-height: 0;
    overflow: hidden;
}

#menu-icon {
    display: block;
    float: right;
    height: 100%;
    width: 22px;
    margin-right: 7%;
    background: black;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
}

#menu-icon.active{
    background: blue;
}

.item{
    display: inline-flex;
    width: 86vw;
    padding: 8px 0;
    margin: 0 7%;
    border-top: 1px solid #58595b;
}

.item a{
    color: #58595b;
    display: inline-block;
    width: 85%;
    transition: all 0.3s;
}

<header id="header">
    <div id="menu-icon"></div>
    <nav id="navbar">
        <div class="item">
            <a href="#">Item A</a>
        </div>
        <div class="item">
            <a href="#">Item B</a>
        </div>
        <div class="item">
            <a href="#">Item C</a>
        </div>
        <div class="item">
            <a href="#">Item D</a>
        </div>
        <div class="item">
            <a href="#">Item E</a>
        </div>
        <div class="item">
            <a href="#">Item F</a>
        </div>
        <div class="item">
            <a href="#">Item A</a>
        </div>
        <div class="item">
            <a href="#">Item B</a>
        </div>
        <div class="item">
            <a href="#">Item C</a>
        </div>
        <div class="item">
            <a href="#">Item D</a>
        </div>
        <div class="item">
            <a href="#">Item E</a>
        </div>
        <div class="item">
            <a href="#">Item F</a>
        </div>
        <div class="item">
            <a href="#">Item A</a>
        </div>
        <div class="item">
            <a href="#">Item B</a>
        </div>
        <div class="item">
            <a href="#">Item C</a>
        </div>
    </nav>
</header>

Answer 1

只需添加这个 CSS

#navbar{
    position: relative;
    overflow-y: auto;
}

Answer 2

你可以在这个css文件中添加

#navbar{
    position: relative;
    overflow-y: scroll;
    height:200px;
}

window.onload = function() {
    var menuBtn = document.getElementById("menu-icon"),
        navbar = document.getElementById("navbar"),
        header = document.getElementById("header");
    
    menuBtn.addEventListener('click', toggleMenu);
 
    function toggleMenu(){
        menuBtn.classList.toggle("active");
        navbar.style.maxHeight = navbar.style.maxHeight ? null : navbar.scrollHeight + "px";
    }
}

header {
    background:#ddd;
    position: fixed;
    height: 45px;
    top: 0;
    width: 100vw;
    z-index: 500;
}
#navbar{
    position: relative;
    overflow-y: scroll;
    height:200px;
}
nav{
    overflow: auto;
    background: #fff;
    position: absolute;
    left: 0;
    top: 45px;
    transition: all 0.3s;
    max-height: 0;
    overflow: hidden;
}

#menu-icon {
    display: block;
    float: right;
    height: 100%;
    width: 22px;
    margin-right: 7%;
    background: black;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
}

#menu-icon.active{
    background: blue;
}

.item{
    display: inline-flex;
    width: 86vw;
    padding: 8px 0;
    margin: 0 7%;
    border-top: 1px solid #58595b;
}

.item a{
    color: #58595b;
    display: inline-block;
    width: 85%;
    transition: all 0.3s;
}

<header id="header">
    <div id="menu-icon"></div>
    <nav id="navbar">
        <div class="item">
            <a href="#">Item A</a>
        </div>
        <div class="item">
            <a href="#">Item B</a>
        </div>
        <div class="item">
            <a href="#">Item C</a>
        </div>
        <div class="item">
            <a href="#">Item D</a>
        </div>
        <div class="item">
            <a href="#">Item E</a>
        </div>
        <div class="item">
            <a href="#">Item F</a>
        </div>
        <div class="item">
            <a href="#">Item A</a>
        </div>
        <div class="item">
            <a href="#">Item B</a>
        </div>
        <div class="item">
            <a href="#">Item C</a>
        </div>
        <div class="item">
            <a href="#">Item D</a>
        </div>
        <div class="item">
            <a href="#">Item E</a>
        </div>
        <div class="item">
            <a href="#">Item F</a>
        </div>
        <div class="item">
            <a href="#">Item A</a>
        </div>
        <div class="item">
            <a href="#">Item B</a>
        </div>
        <div class="item">
            <a href="#">Item C</a>
        </div>
    </nav>
</header>