フルスクリーンメニュー - スクロールバーを非表示にしますが、ホイールまたは指でスクロールできるようにします

Question

フルスクリーンメニューを作成しています。表示されたら、メニューにoverflow-y: scrollというプロパティを付けない限り、要素の一部が表示されません。問題は、メニューの2番目のスクロールバーの外観が気に入らないということです。

どのように私はそれを削除しますが、まだメニュー項目をスクロールすることができることができます。メニューをフルにしておくことが重要です。私は「固定」ポジションから「絶対」ポジションに変更しようとしましたが、ウェブサイトをスクロールしていて、フルスクリーンで表示されませんでした。私は、メニューが目に見える唯一のものである限り、メニューの背後にあるウェブサイトをスクロールしても構いません。

マイコード：

<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

一つの方法はにありますメニューが開いているときに本文のスクロールバーを非表示にします。私のCSSで、

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

そして：私は、メニューを開いたときにそう、私はボディにクラスを追加

最後に

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

、メニューを閉じるとき：

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

次に、メニューにoverflow-yを追加すると、意図したとおりに動作します。

ユーザーのスクロールをメニューだけに制限したいので、メニューをオーバーフローさせるのではなく、この方法で行います。スクロールできないようにする必要があります。