移动端横向窄屏菜单无法滚动的解决方案求助

问题概述 #

菜单采用父项悬停显示子链接的结构，移动端用汉堡菜单适配，但在横向移动端（如iPhone横屏），长菜单超出屏幕无法滚动，底部下拉菜单被遮挡，用户无法查看完整内容。

修改后的代码 #

HTML代码（调整下拉按钮交互触发逻辑） #

<nav>
    <div class="topnav" id="topNav">
        <a href="/" title="Scott's Painting & Staining Inc">Home</a>
        <div class="dropdown">
            <button class="dropbtn" title="Omaha Services" onclick="toggleDropdown(this)">Services &#9660;</button>
            <div class="dropdown-content">
                <a href="omaha-house-painter.html" title="Omaha Exterior Painting Services">- Exterior Painting</a>
                <a href="omaha-siding-contractor-carpenter.html" title="Omaha Siding Repair Services">- Siding Repair</a>
                <a href="chimney-siding-repair.html" title="Omaha Chimney Siding Repair Services">- Chimney Siding Repair</a>
                <a href="omaha-woodpecker-siding-repair.html" title="Omaha Woodpecker Siding Repair Services">- Woodpecker Siding Repair</a>
                <a href="omaha-vinyl-siding-repair.html" title="Omaha Vinyl Siding Repair Services">- Vinyl Siding Repair</a>
                <a href="omaha-interior-painting-contractor.html" title="Omaha Interior Painting Services">- Interior Painting</a>
                <a href="omaha-cabinet-trim-staining.html" title="Omaha Cabinet Painting Services">- Cabinet Painting</a>
                <a href="omaha-deck-staining-contractor.html" title="Omaha Deck Staining Services">- Deck Staining</a>
                <a href="omaha-fence-staining-contractor.html" title="Omaha Fence Staining Services">- Fence Staining</a>
                <a href="omaha-power-washing-services.html" title="Omaha Power Washing Services">- Power Washing</a>
            </div>
        </div>
        <a href="reviews-testimonials-feedback.html" title="5-star Reviews">Reviews</a>
        <div class="dropdown">
            <button class="dropbtn" title="Omaha Photo Gallery" onclick="toggleDropdown(this)">Gallery&#9660;</button>
            <div class="dropdown-content">
                <a href="omaha-painting-service.html" title="Omaha Painters">- Exterior Painting</a>
                <a href="omaha-hardboard-siding-replaced.html" title="Omaha Siding Replacement">- Siding Replacement</a>
                <a href="omaha-interior-painter.html" title="Omaha Interior Painting">- Interior Painting</a>
                <a href="omaha-deck-refinishing.html" title="Omaha Deck Staining">- Decks</a>
                <a href="pergola-building-staining.html" title="Omaha Pergola Staining">- Pergolas</a>
            </div>
        </div>
        <a href="about-us.html" title="About Scott's Painting & Staining Inc.">About</a>
        <a href="contact-us.html" title="Contact Painters Near Me">Contact</a>
        <a href="omaha-painters-blog.html" title="Omaha Painters Blog">Blog</a>
        <div class="round-div">
            <div class="facebook-round">
                <a href="https://www.facebook.com/ScottsPaintingOmaha" title="Facebook" target="new">Facebook</a></div>
            <div class="x-round">
                <a href="https://x.com/ScottsPainting_" title="Twitter - X" target="new">Twitter - X</a></div>
            <div class="instagram-round">
                <a href="https://www.instagram.com/scotts.painting" title="Instagram" target="new">Instagram</a></div>
            <div class="pinterest-round">
                <a href="https://www.pinterest.com/scottspaintingomaha" title="Painting Ideas on Pinterest" target="new">Pinterest Ideas</a></div>
            <div class="linkedin-round">
                <a href="https://www.linkedin.com/company/scott-s-painting-staining-inc" title="LinkedIn" target="new">LinkedIn</a></div>
            <div class="youtube-round">
                <a href="https://www.youtube.com/channel/UC4vKs_a0vhlN_4JQfTOy7hA" title="YouTube Channel" target="new">YouTube Channel</a></div>
            <div class="yelp-round round-hide">
                <a href="https://www.yelp.com/biz/scotts-painting-and-staining-omaha-11" title="Yelp" target="new">Yelp Painter</a></div>
            <div class="houzz-round round-hide">
                <a href="https://www.houzz.com/professionals/painters/scotts-painting-and-staining-inc-pfvwus-pf~1989876536" title="Houzz" target="new">Find us on Houzz</a></div>
            <a href="#" class="icon width52" onclick="navFunction()" title="Omaha Painters">
                <div class="menu-burger"></div>
                <div class="menu-burger-middle"></div>
                <div class="menu-burger"></div>
            </a>
        </div>
    </div>
</nav>

CSS代码（核心修复滚动与响应式适配） #

/****************** Burger Menu and Main Menu ***********************************************/

.topnav{overflow:hidden;background-color:#333}

.topnav a{
    float:left;
    display:block;
    color:#ffc82d;
    text-align:center;
    padding:14px 10px;
    text-decoration:none;
    font-size:18px}

.topnav a:hover, .dropdown:hover .dropbtn, .dropdown.active .dropbtn{background-color:#ddd;color:black}
.topnav .icon{display:none}

/***************** nav sub-menu **********************************/

.dropdown{float:left;overflow:hidden}
.dropdown .dropbtn{font-size:18px;border:none;outline:none;background-color:#333;color:#ffc82d;padding:14px 16px;font-family:inherit;margin:0;text-align:center;text-decoration:none;cursor:pointer}
.dropdown-content{display:none;position:absolute;background-color:#333;min-width:160px;box-shadow:0 8px 16px 0 rgba(0,0,0,0.2);z-index:1;max-height:250px;overflow-y:auto}
.dropdown-content a{float:none;color:#ffc82d;padding:12px 16px;text-decoration:none;display:block;text-align:left}
.dropdown-content a:hover{background-color:#ddd;color:black}
.dropdown:hover .dropdown-content, .dropdown.active .dropdown-content{display:block}

.menu-burger{
    width:30px;
    height:3px;
    background-color:#ffc82d;
    margin:0}

.menu-burger-middle{
    width:30px;
    height:3px;
    background-color:#ffc82d;
    margin:6px 0}

.icon:hover .menu-burger, .icon:hover .menu-burger-middle{background-color:black}
  
.round-div{float:right;padding:0}

/*****************************************************************/


/* 适配移动端（含横向模式） */
@media (max-width:900px), (max-height:500px) and (orientation:landscape){
    .topnav a:not(:first-child), .dropdown .dropbtn{display:none}
    .topnav a.icon{float:right;display:block}
    .topnav.responsive{position:fixed;top:0;left:0;width:100%;height:100vh;overflow-y:auto;background-color:#333;z-index:999}
    .topnav.responsive .icon{position:absolute;right:10px;top:10px}
    .topnav.responsive a{float:none;display:block;text-align:left;padding:14px 15px}
    .topnav.responsive .dropdown{float:none;width:100%}
    .topnav.responsive .dropdown-content{position:relative;max-height:200px;width:100%;box-shadow:none}
    .topnav.responsive .dropdown .dropbtn{display:block;width:100%;text-align:left;padding:14px 15px}
}

JavaScript代码（新增下拉菜单点击切换，优化汉堡菜单逻辑） #

function navFunction() {
    var x = document.getElementById("topNav");
    if (x.className === "topnav") {
        x.className += " responsive";
        // 打开菜单时禁止页面滚动
        document.body.style.overflow = "hidden";
    } else {
        x.className = "topnav";
        // 关闭菜单时恢复页面滚动
        document.body.style.overflow = "auto";
        // 关闭所有下拉菜单
        document.querySelectorAll('.dropdown.active').forEach(dropdown => {
            dropdown.classList.remove('active');
        });
    }
}

function toggleDropdown(btn) {
    const dropdown = btn.parentElement;
    dropdown.classList.toggle('active');
    // 移动端菜单中点击下拉时滚动到对应位置
    if(document.getElementById('topNav').classList.contains('responsive')){
        dropdown.scrollIntoView({behavior: 'smooth', block: 'start'});
    }
}

// 点击页面其他区域关闭下拉菜单
document.addEventListener('click', function(e) {
    if(!e.target.closest('.dropdown')){
        document.querySelectorAll('.dropdown.active').forEach(dropdown => {
            dropdown.classList.remove('active');
        });
    }
});

关键修复点说明 #

• 扩大响应式覆盖范围：将原断点max-width:550px调整为max-width:900px，新增横向模式判断(max-height:500px) and (orientation:landscape)，确保横屏移动端触发汉堡菜单。
• 菜单容器滚动设置：给.topnav.responsive添加height:100vh和overflow-y:auto，让展开的汉堡菜单可滚动，避免超出屏幕。
• 下拉菜单滚动限制：给.dropdown-content设置max-height和overflow-y:auto，防止子菜单过长遮挡底部内容。
• 移动端交互优化：将下拉菜单从悬停触发改为点击触发（适配无鼠标场景），添加点击外部关闭下拉的逻辑。
• 页面滚动锁定：打开汉堡菜单时锁定页面滚动，避免菜单与页面同时滚动导致体验混乱。

内容的提问来源于stack exchange，提问作者Raptor