I have implemented a very basic off-canvas 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");
});

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");
});

• javascript
• jquery
• html
• css
• navigation

• what is off-canvas navigation? – akonsu Commented May 14, 2014 at 20:47
• The navigation is absolutely positioned so that it remains outside the viewable area until it is triggered. – APAD1 Commented May 14, 2014 at 20:49
• 2 It's much easier to store state in either the body or html tag. $("html").toggleClass("menu-active"); with css selectors .menu-active .page-wrapper and .menu-active #menu. That way they all stay in sync, and a single class modifies both sets of css properties. – Ryan Taylor Commented Nov 10, 2014 at 22:49

3 Answers 3

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!

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.

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