メニューボタンをクリックするとページスクロールを非表示にする

私のページにモバイルメニューを表示するには、以下のコードを使用します。私は次のことを知りたいと思います：メニューボタンをクリックするとページスクロールを非表示にする

メニューボタンをクリックしたときにページスクロールバーを非表示にして、メニューを閉じると再びスクロールする方法はありますか？それはあなたのために動作するコードの下

<script> 
    $(document).ready(function() { 
    console.log("ready!"); 
    var mobileTrigger = $('.js-mobile-menu-trigger'); 
    var mobileMenu = $('.js-mobile-menu'); 

    mobileTrigger.on('click', function() { 
     $(this).toggleClass('active'); 
     mobileMenu.toggleClass('active');      
     console.log('wat');   
    }); 
    }); 
</script> 

<html> 
    <head></head> 
    <body> 

    <div class="site-header-inner"> 
     <button class="site-nav-trigger js-mobile-menu-trigger"> 
     <span class="site-nav-trigger-icon">Menu</span></button> 
     <ul class="site-nav js-mobile-menu"> 

      <li><a class="nav-link-home"href="/">Menu</a></li>  
      <li><a class="nav-link-home"href="/">Menu</a></li>  
      <li><a class="nav-link-home"href="/">Menu</a></li>  
     </ul> 
    </div> 

    <div id="content">text text text text text </div> 
    </body> 
</html>

出典

2017-11-27 user7082272

は私のこの答えをチェックしてください - https://stackoverflow.com/a/47394488/8840862 –

用途：

$('.js-mobile-menu-trigger').click(function(event) { 
    event.preventDefault(); 
    $('body').css('overflow', 'hidden'); 
});

出典

2017-11-27 04:48:57

メニューボタンをクリックするとページスクロールを非表示にする

答えて

関連する問題