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

我正在创建一个全屏菜单。当它出现时，一些元素不可见，除非我给菜单一个

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>

jQuery仅用于添加打开的类：

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

---

我在自己的网站上亲自处理这个问题的一种方法是在菜单打开时隐藏身体的滚动条。因此，当我打开菜单时，我向主体添加了一个类：

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

在我的CSS中：

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

最后，关闭菜单时：

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

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

---

我这样做，而不是让菜单显示其溢出，因为我喜欢将用户的滚动限制为仅滚动菜单-他们不应该能够滚动通过它。

这确实有效。只要它摆脱了两个丑陋的滚动条，我就很高兴！

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