Question

我实现了一个非常基本的画布后导航（http://blog.tomri.ch/super-simple-off-canvas-menu-navigation/）。我唯一的问题是您无法滚动菜单，这在移动横向模式下尤其成问题，其中菜单会延伸到可视屏幕区域下方。

我想知道导航菜单打开时是否有办法防止page-wrapper div内的内容滚动并在离开画布的导航中启用滚动，如果可能的话，不显示导航上一个很难看的滚动条。

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

Answer 1

要启用任何块级元素滚动，请将其overflow:auto;＆amp;取决于您的网站/应用height:100%;。要禁用主要内容的滚动，您可以执行一些操作，但是您必须对它们进行实验。您可以将导航扩展到页面的100％宽度，并且您看到内容的区域仅由不可见元素覆盖，以阻止滚动或仅滚动导航。您也可以在点击时禁用/启用正文滚动，请注意overflow:hidden; html,body上的最佳结果，它解决了一些跨浏览器/ ios问题。

希望这会给你一些见解！

Answer 2

当打开te菜单时，您可以将此属性添加到div容器中

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

或

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

@Shan Robertson解释

或者只是添加一个具有这些属性的类，这会在侧面导航打开时阻止主要内容滚动。

Answer 3

您不必编写外部代码，只需在“打开”后编写即可。设置＆＃39; afterOpen＆＃39 ;: function（）{$（＆＃34; body＆＃34;）。css（＆＃34; overflow-y＆＃34;，＆＃34; hidden＆＃34;）;

如何防止在正文内容上滚动并在打开时启用在画布外导航时滚动？

3 个答案: