响应式菜单的子菜单在屏幕外流动时不会强制滚动

Question

编辑：用户在另一个网站上解决了问题。我将此概述为一个单独的答案。

=====

编辑：我尝试过导航的各种溢出设置，但仍然没有。这一定很简单，但我找不到它。任何人吗？

=====

我有一个响应式菜单，当在较大的窗口中到达页面顶部时是粘性的，但在显示汉堡包时永久固定在顶部。菜单使用Todd Motto的flaunt.js菜单：https://toddmotto.com/labs/flaunt-js/

在原始演示（上图）中，菜单未修复。更改CSS以使菜单固定会产生阻止菜单滚动的不幸效果。

我想阻止身体滚动，我可以使用jQuery toggleClass成功，但需要使菜单可滚动，因为它通常会在较小的设备上以汉堡包模式延伸到屏幕外。

我尝试将 overflow-y：scroll 添加到菜单结构的各个部分;这会创建滚动轨道，但即使菜单在屏幕外延伸，仍然没有内部栏和滚动。

将CSS类 .nav 中导航的位置从默认样式中的位置：相对更改为位置：已修复使用媒体查询（max-width：768px）。

有没有办法让菜单滚动，理想情况下是主浏览器的滚动条（身体不滚动）？

我的 JS 用于防止正文滚动并可能启用菜单滚动，同时向正文添加叠加层：

$(document).ready(function(){
$( ".nav-mobile" ).click(function() {
    $( "#overlay" ).toggle();
    $( "#mybody").toggleClass("scroll no-scroll");
    $( "#SomeIDinTheNavSomewhere").toggleClass("scroll no-scroll");
});
});

CSS ：

#overlay {
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 100%;
height: 100%;
background:  rgba(40,40,40, .75);
}
.no-scroll {
overflow-y: scroll;
position: fixed;
}
.scroll {
overflow-y: scroll;
}

我选择保留滚动轨道以避免汉堡在切换时由于启用/禁用正文滚动而不是使用overflow：hidden进行切换，但无论如何都会产生相同的不需要的行为。

flaunt.js菜单的html，css和js的裁剪和最小版本如下。

jsfiddle position：fixed here：https://jsfiddle.net/m_d_a/6gtjpvck/1/

jsiddle position：relative here：https://jsfiddle.net/m_d_a/6gtjpvck/不要担心布局，只是为了证明当.nav没有修复时滚动存在。

HTML

<nav class="nav">
    <ul class="nav-list">
        <li class="nav-item">
            <a href="?=home">Home</a>
                <ul class="nav-submenu">
                    <li class="nav-submenu-item">
                        <a href="?=submenu-1">Submenu item 1</a>
                    </li>
                    <li class="nav-submenu-item">
                        <a href="?=submenu-2">Submenu item 2</a>
                    </li>
                    <li class="nav-submenu-item">
                        <a href="?=submenu-3">Submenu item 3</a>
                    </li>
                    <li class="nav-submenu-item">
                        <a href="?=submenu-4">Submenu item 4</a>
                    </li>
                </ul>
        </li>
        <li class="nav-item">
            <a href="?=about">About</a>
        </li>
        <li class="nav-item">
            <a href="?=services">Services</a>
                <ul class="nav-submenu">
                    <li class="nav-submenu-item">
                        <a href="?=submenu-1">Submenu item 1</a>
                    </li>
                    <li class="nav-submenu-item">
                        <a href="?=submenu-2">Submenu item 2</a>
                    </li>
                    <li class="nav-submenu-item">
                        <a href="?=submenu-3">Submenu item 3</a>
                    </li>
                    <li class="nav-submenu-item">
                        <a href="?=submenu-4">Submenu item 4</a>
                    </li>
                </ul>
        </li>
        <li class="nav-item">
            <a href="?=portfolio">Portfolio</a>
        </li>
        <li class="nav-item">
            <a href="?=testimonials">Testimonials</a>
        </li>
        <li class="nav-item">
            <a href="?=contact">Contact</a>
        </li>
    </ul>
</nav>

CSS

a, a:hover {
text-decoration:none;
}
ul, ol {
list-style:none;
}

.nav {
position:relative;
display:inline-block;
font-size:14px;
font-weight:900;
}
.nav-list {
text-align:left;
}
.nav-item {
float:left;
*display:inline;
zoom:1;
position:relative;
}
.nav-item a {
display:block;
color:#FFF;
padding:15px 20px;
background:#7A1E61;
border-bottom:1px solid #8B2870;
}
.nav-item > a:hover {
background:#822368;
}
.nav-item:hover .nav-submenu {
display:block;
}

.nav-submenu {
display:none;
position:absolute;
left:0;
width:180px;
}
.nav-submenu-item a {
background:#8B2770;
border-bottom:1px solid #9A337E;
display:block;
padding:15px;
}
.nav-submenu-item a:hover {
background:#932C77;
}

.nav-mobile {
display:none; /* Hide from browsers that don't support media queries */
cursor:pointer;
position:fixed;
top:0;
right:0;
background:#3D3D3B;
background-size:18px;
height:50px;
width:50px;
}

.nav-click {
position:absolute;
top:0;
right:0;
display:none;
border-left:1px solid #8B2870;
height:49px;
width:50px;
cursor:pointer;
}
.nav-click i {
display:block;
height:48px;
width:48px;
background:url(https://toddmotto.com/labs/flaunt-js/img/drop.svg) no-repeat center center;
background-size:20px;
}
.nav-click:hover {
background-color:#6E1656;
}
.nav-rotate {
-webkit-transform:rotate(180deg);
-moz-transform:rotate(180deg);
-ms-transform:rotate(180deg);
-o-transform:rotate(180deg);
transform:rotate(180deg);
}

/*-----------*\
Media Queries
\*-----------*/

@media only screen and (min-width: 320px) and (max-width: 768px) {
.nav-mobile {
    display:block;
    position: fixed;
}
.nav {
    width:100%;
    padding:50px 0 0;
}
.nav-list {
    display:none;
}
.nav-item {
    width:100%;
    float:none;
 }
.nav-item > a {
    padding:15px;
}
.nav-click {
    display:block;
}
.nav-mobile-open {
    border-radius:5px 5px 0 0;
    -webkit-border-radius:5px 5px 0 0;
    -moz-border-radius:5px 5px 0 0;
}
.nav-item:hover .nav-submenu {
    display:none;
}
.nav-submenu {
    position:static;
    width:100%;
}
}

JS

;(function($) {

// DOM ready
$(function() {

    // Append the mobile icon nav
    $('.nav').append($('<div class="nav-mobile"></div>'));

    // Add a <span> to every .nav-item that has a <ul> inside
    $('.nav-item').has('ul').prepend('<span class="nav-click"><i class="nav-arrow"></i></span>');

    // Click to reveal the nav
    $('.nav-mobile').click(function(){
        $('.nav-list').toggle();
    });

    // Dynamic binding to on 'click'
    $('.nav-list').on('click', '.nav-click', function(){

        // Toggle the nested nav
        $(this).siblings('.nav-submenu').toggle();

        // Toggle the arrow using CSS3 transforms
        $(this).children('.nav-arrow').toggleClass('nav-rotate');

    });

});

})(jQuery);

谢谢。我意识到这里可能会有一点跋涉。

Answer 1

感谢另一个网站上的用户我遇到的问题是因为我没有指定导航的高度。

对于使用溢出的滚动条，必须设置高度。

max-height: calc(100% - 50px);
overflow-y: auto;

这使滚动条工作。但是，由于我希望主窗口具有滚动条，我将从位置删除实际导航：固定; 以嵌入全屏覆盖。除此之外，上面的CSS解决了问题并回答了问题。