How to prevent scrolling on body content and enable scrolling on off-canvas navigation when open?

Question

I have implemented a very basic off-canvas navigation(http://blog.tomri.ch/super-simple-off-canvas-menu-navigation/). The only issue I'm having is that you can't scroll the menu, this is especially problematic in mobile landscape mode, where the menu extends below the viewable screen area.

I am wondering if there is a way, when the navigation menu is open, to prevent the content within the page-wrapper div from scrolling and enable scrolling in the off-canvas navigation, and, if possible, not show a big ugly scrollbar on the navigation.

HTML:

<nav id="menu">
    <a href="#menu" class="menu-link"></a>
    <ul>
       <span><a href="#">Title</a></span>
       <li><a href="#">Home</a></li>
       <li><a href="#">About</a></li>
       <li><a href="#">Contact</a></li>
       <li><a href="#">Blog</a></li>
    </ul>
</nav>

<div class="page-wrapper">
    Body Content Here
</div>

CSS:

#menu {
    position: fixed;
    top: 0;
    bottom: 0;
    width: 13.755em;
    right: -13.755em;
    height: 100%;
    -webkit-transform: translate(0px, 0px);
    -moz-transform: translate(0px, 0px);
    -o-transform: translate(0px, 0px);
    -ms-transform: translate(0px, 0px);
    transform: translate(0px, 0px);
    -webkit-transition: 0.15s ease;
    -moz-transition: 0.15s ease;
    -o-transition: 0.15s ease;
    transition: 0.15s ease;
}
    #menu.active {
        -webkit-transform: translate(-13.755em, 0px);
        -moz-transform: translate(-13.755em, 0px);
        -o-transform: translate(-13.755em, 0px);
        -ms-transform: translate(-13.755em, 0px);
        transform: translate(-13.755em, 0px);
    }
.page-wrapper {
       -webkit-transform: translate(0px, 0px);
       -moz-transform: translate(0px, 0px);
       -o-transform: translate(0px, 0px);
       -ms-transform: translate(0px, 0px);
       transform: translate(0px, 0px);
       -webkit-transition: 0.15s ease;
       -moz-transition: 0.15s ease;
       -o-transition: 0.15s ease;
       transition: 0.15s ease;  
}
    .page-wrapper.active {
           -webkit-transform: translate(-13.725em, 0px);
           -moz-transform: translate(-13.725em, 0px);
           -o-transform: translate(-13.725em, 0px);
           -ms-transform: translate(-13.725em, 0px);
           transform: translate(-13.725em, 0px);
    }

.menu-link {
    position: absolute;
    top: 15px;
    left: -50px;
}

Javascript:

$(".menu-link").click(function(){
    $("#menu").toggleClass("active");
    $(".page-wrapper").toggleClass("active");
});

Solution 1

To enable any block level element to scroll you give it overflow:auto; & depending on your site/app height:100%;. To disable scrolling on the main content there are a few things you can do, but you will have to experiment with them. You could have the nav extend to 100% width of the page, and the area where you see the content is just covered by an invisible element, to block scrolling or just keep scrolling the nav. You could, on click, disable/enable scrolling on the body also, note for best results apply overflow:hidden; on html,body, it solves some cross browser / ios issues.

Hope this gives you some insight!

Solution 2

Well you can add to your div container this attributes when te menu is opened

.container.active{
 position:fixed;
 width:100%;
}

or

.container.active{
    height:100%;
    overflow:hidden;
}

as @Shan Robertson explain

Or just add a class with those attributes, that would block the main content to scrolll while the side nav is open.

Solution 3

You don't have to write external code, just write it in 'afterOpen' settings 'afterOpen': function() { $( "body" ).css( "overflow-y", "hidden" );