全屏菜单 - 隐藏滚动条但允许我使用滚轮或手指滚动

Question

我正在创建一个全屏菜单。当它出现时，一些元素是不可见的，除非我给菜单一个overflow-y: scroll属性。问题是我不喜欢菜单第二个滚动条的外观。

如何删除它，但仍可以滚动菜单项。让菜单保持完整非常重要，我尝试从“固定”位置更改为“绝对”位置，但之后它只是通过网站滚动并且根本看不到全屏。我不介意网站滚动菜单，只要菜单是唯一可见的。

我的代码：

<header>
<div id="logo-container">
    <img src="http://localhost/theinsidervox/wp-content/uploads/2017/03/logo.png" alt="The Insider Vox">
</div>

<div class="menu-main-menu-container">
    <ul id="menu-main-menu" class="menu">
        <li id="menu-item-19"> <a href="http://localhost/theinsidervox/">Inicio</a></li>
        <li id="menu-item-28"><a href="#">First Test Menu Item</a></li>
        <li id="menu-item-29"><a href="#">Second Test Menu Item</a></li>
        <li id="menu-item-30"><a href="#">Third Test Menu Item</a></li>
        <li id="menu-item-21"><a href="#">Lorem Ipsum</a></li>
        <li id="menu-item-22"><a href="#">Lorem Ipsum Plain</a></li>
        <li id="menu-item-23"><a href="#">Lorem Ipsum Videos</a></li>
        <li id="menu-item-24"><a href="#">Lorem Ipsum Galleries</a></li>
    </ul>
</div>    

</header>

CSS：

/* Header and Menu */
header {
    position: relative;
    width: 100%;
    background-color: #fff;
}
header.menu-open {
    position: fixed;
    z-index: 9999;
    height: 100%;
    overflow-y: auto;
}

ul.menu {
    display: none;
    width: 100%;
    height: auto;
    background-color: #fff;
    list-style-type: none;
    margin: 0px;
    padding: 0px;
}
header.menu-open ul.menu {
    display: block;
    position: absolute;
}
ul.menu li {
    text-align: center;
    padding: 10px 0px;
}
ul.menu li a {
    text-transform: uppercase;
    font-size: 52px;
    font-weight: 700;
    letter-spacing: 0.7;
    color: #0f0f0f;
    text-decoration: none;
}
ul.menu li a:hover {
    text-decoration: underline;
    opacity: 0.8;
}

jQuery只是为了添加OPENED类：

$('#logo-container img').click(function() {
    $('header').addClass('menu-open');
});

Answer 1

我在自己的网站上亲自处理这种方法的一种方法是在菜单打开时隐藏身体的滚动条。所以，当我打开菜单时，我会在正文中添加一个类：

$(document.body).addClass("menu-open");

而且，在我的CSS中：

body.menu-open {
    overflow-y: hidden;
}

最后，关闭菜单时：

$(document.body).removeClass("menu-open");

然后，您可以在菜单中添加overflow-y，它将按预期工作。

我是这样做的，而不仅仅是让菜单显示溢出因为我想限制用户滚动到菜单 - 他们不应该滚动过去。