I have a mobile menu, more than the height of the screen. I want to disable the page scrolling, but allow scrolling in the menu, usually the menu height is larger than the window.

$('.menumob').click(function () { $('#mobile-menu').fadeIn(400).css({ display: 'flex' }); $("body").css("overflow","hidden"); }); //Close mobile menu $('.menumob_close').click(function () { $('#mobile-menu').fadeOut(400); $("body").css("overflow","auto"); });

This code disables the scroll, but also disables the menu. Added overflow:auto and overflow:scroll did not help.

    1 answer 1

    This can be solved with the help of css. Set the size of your body equal to the size of the screen, and everything that goes beyond the hide - so you will not scroll the page. And place the menu in a container with vertical scrolling, like this:

     body{ width:100vw; height:100vh; overflow:hidden; } .body-container{ width:100vw; height:100vh; overflow:hidden; background:lightgrey; } .mobile-menu{ width:200px; max-height: 100vh; overflow-y:scroll; border:1px solid black; } .mobile-menu .mobile-menu-item{ height:100px; text-align:center; } 
     <div class = "body-container"> <div class = "mobile-menu"> <div class = "mobile-menu-item">Пункт меню</div> <div class = "mobile-menu-item">Пункт меню</div> <div class = "mobile-menu-item">Пункт меню</div> <div class = "mobile-menu-item">Пункт меню</div> <div class = "mobile-menu-item">Пункт меню</div> <div class = "mobile-menu-item">Пункт меню</div> <div class = "mobile-menu-item">Пункт меню</div> <div class = "mobile-menu-item">Пункт меню</div> </div> </div>

    • one
      Thank you very much, helped! - Alexander Alekseev