可滚动画布菜单

Question

我刚刚在codepen上发现了一个有趣的画布外菜单。如果有人点击汉堡包图标，它会显示包含其内容的重叠菜单。但那个覆盖菜单根本无法向下滚动。如果某人向下滚动，则后面的页面正在滚动;而不是叠加菜单。我需要向下滚动该覆盖页面。我检查了代码并发现了问题。它使用overflow:hidden作为包装div。我将overflow: auto设置为该div;似乎问题解决了。但是背景页面仍然使用覆盖菜单向下滚动。我怎样才能设置只有覆盖菜单向下滚动？

.overlay { 
    position: fixed; 
    background: $color-main; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 0%; 
    opacity: 0; 
    visibility: hidden; 
    transition: opacity .35s, visibility .35s, height .35s; 
    overflow: hidden; 
} 

这里是链接codepen

Answer 1

使overflow:scroll;在覆盖类，然后添加更多的链接菜单。它会滚动。

对于页面滚动，改变了jQuery这样

$('#toggle').click(function() { 
$(this).toggleClass('active'); 
$('#overlay').toggleClass('open'); 
$('body').css('overflow', 'hidden'); 
}); 

，这将使人体不可滚动菜单时按下。