单击菜单按钮时隐藏页面滚动答案

【问题标题】：Hide page scroll when clicking menu button单击菜单按钮时隐藏页面滚动
【发布时间】：2017-11-27 14:54:53
【问题描述】：

我使用下面的代码在我的页面上显示移动菜单。我想知道以下内容：

如何在点击菜单按钮时隐藏页面滚动条，然后在关闭菜单时再次滚动？

<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>

【问题讨论】：

检查我的这个答案 - stackoverflow.com/a/47394488/8840862

标签： javascript jquery html css

【解决方案1】：

使用下面的代码它会为你工作：

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

【讨论】：