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

Question

I use the code below to display a mobile menu on my page. 我使用下面的代码在页面上显示移动菜单。 I would like to know the following: 我想知道以下内容：

How to hide the page scroll bar when I click the menu button and then scroll again when I close the menu? 单击菜单按钮时如何隐藏页面滚动条，然后在关闭菜单时再次滚动？

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

Answer 1

Use Below code it will work for You : 使用下面的代码，它将为您服务：

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

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

问题描述

1 个解决方案

解决方案1
0 2017-11-27 04:48:57

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

问题描述

1 个解决方案

解决方案1 0 2017-11-27 04:48:57

解决方案1
0 2017-11-27 04:48:57