html - 移动菜单不可滚动

Question

我更新了我的作品集，但现在我有更多在线元素，我需要一个可滚动的移动菜单，但现在无法使用。

您可以在此处找到该网站:www.jessewensing.com

我尝试更改高度并将 % 更改为 vh，但我找不到问题。

这是 html:

<div class="mobile">
<header class="header">
    <div class="header-container">
        <div class="naam"><a href="index.html">JESSE WENSING</a></div>
        <a href="#" class="mobile-menu-button sm-show" id="mobile-menu-button">
            <div class="menu-line"></div>
            <div class="menu-line"></div>
            <div class="menu-line"></div>
        </a>
        <div class="mobile-menu" id="mobile-menu">
            <ul>
                <li><a href="lowlands.html">Lowlands Flag</a></li>
                <li><a href="criticism.html">CRITICISM AND THE CONNECTION</a></li>
                <li><a href="summercollection.html">Camper Summer Collection</a></li>
            <li><a href="PreSeason.html">PreSeason Camper</a></li>
                <li><a href="invite.html">INVITATION</a></li>
                <li><a href="bookcovers.html">SELL IN TOOL</a></li>
                <li><a href="kop.html">Exhibition Booklet</a></li>
                <li><a href="smbcampagne.html">Stedelijk Museum Breda</a></li>
                <li><a href="googleatlas.html">GOOGLE ATLAS</a></li>
                <li><a href="stories.html">95 STORIES</a></li>
                <li><a href="lifeanddeath.html">LIFE & DEATH OF A GLACIER</a></li>
                <li><a href="patp.html">INTERVIEW PAT PERRY</a></li>
                <li><a href="scores.html">SCORES</a></li>
                <li><a href="blowup.html">BLOW UP</a></li>
                <li><a href="endless.html">ENDLESS INTERNET</a></li>
                <li><a href="illegible.html">ILLEGIBLE</a></li>
                <li><a href="fluxus.html">FLUXUS STAMPS</a></li>
                <li><a href="looper.html">LOOPERBOOK</a></li>
                <li class="menu-spacer">

                <li><a href="cv.html">CV</a></li>
                <a href="mailto:jesse.wensing@ggs.ch">CONTACT</a></li>
                <li><a href="https://www.instagram.com/rst.wz/">INSTAGRAM</a></li>
            </ul>
        </div>
    </div>
</header>
enter code here

这是CSS:

.mobile {
display: none;
}

@media screen and (max-width: 1025px) {

body {
    font-family: 'Akkurat';
    margin: 0;
    color: black;
}

p {
    position: static !important;
    text-align: left;
    color: black;

}

p.text {
    margin-top: 0 !important;
    text-align: left;
    color: black;
}
h1 {text-align: left;
    color:black;
}
.no-mobile {
    display: none;
}

.mobile {
    display: block;
}

header {
    width: 100%;
    z-index: 9999;
    background: #fff;
    margin-bottom: 10px;

    text-transform: uppercase;
}

header .header-container {
    display: flex;
    align-items: center;
    margin: 10px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

header .naam {
    position: static;
    top: 0;
    left: 0;
    right: 0;
}

header .mobile-menu {
    position: absolute;
    top: 40px;
    width: 100%;
    height: 120%;
    z-index: 9999;
    box-sizing: border-box;
    display: none;
    background: #fff;

}

.mobile-menu ul {
    width: 100%;
    height: 100%;
    display: inline;
    background: #ffff00;
}

.mobile-menu .extra-menu-items {
    margin-top: 0px;
    text-align: left;
}

.mobile-menu li {
    width: 100%;
    text-align: left;
}

.mobile-menu .menu-spacer {
    height: 10px;
}

.mobile-menu-button {
    margin-left: auto;
    color:black;
}

.mobile-menu-button .menu-line {
    height: 2px;
    margin-bottom: 3px;
    width: 20px;
    background: #000000;
}

.content {
    width: auto !important;
    left: 0 !important;
    padding: 20px 20px 0;
    text-align: center;
    margin-top: 0 !important;
}

img {
    width: 100% !important;
}

.page-title {
    font-family: 'Akkurat';
    color: #ff0000;
    font-size: 15px;
    text-transform: uppercase;
}

.cv-table {
    text-align: left;
    color: #000000;
    margin-bottom: 20px;
}

.cv-table th {
    font-style: italic;
    font-weight: bold;
}

.cv-table td {
    vertical-align: top;
}

.cv-table td.year {
    font-style: italic;
    padding-right: 20px;
}
}

这是脚本:

window.onload = function () {
var menuButton = document.getElementById("mobile-menu-button"),
    mobileMenu = document.getElementById("mobile-menu"),
    isOpen = false;


menuButton.onclick = function () {
    if (isOpen) {
        mobileMenu.style.display = "none";
        isOpen = false;
    } else {
        mobileMenu.style.display = "block";
        isOpen = true;
    }
}

window.onscroll = function () {
    mobileMenu.style.display = "none";
    isOpen = false;
}
}

我希望移动菜单可以滚动，这样您也可以看到我的简历。

Answer 1

首先，您的菜单 javascript 代码会完全禁用滚动，因为它会隐藏菜单。

    window.onscroll = function () {
        mobileMenu.style.display = "none";
        isOpen = false;
    }