如何防止主体内容滚动并在侧栏导航打开时启用滚动？

Question

如何防止主体内容滚动并在侧栏导航打开时启用滚动？

5

我已经实现了一个非常基本的侧边栏导航(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");
});

- APAD1

离屏导航是什么？ - akonsu

导航栏采用绝对定位，因此在触发之前它会一直保持在可视区域之外。 - APAD1

2

在body或html标签中存储状态要容易得多。使用css选择器.menu-active .page-wrapper和.menu-active #menu，并使用$("html").toggleClass("menu-active");，这样它们就可以保持同步，并且单个类可以修改两组css属性。 - Ryan Taylor

3个回答

3

当菜单打开时，您可以向 div 容器添加以下属性：

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

或者

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

如@Shan Robertson所解释的那样，或者只需添加一个带有这些属性的类，即可在侧边导航打开时阻止主内容滚动。

- Jhonnatan Gonzalez Rodriguez

1

您不必编写外部代码，只需在“afterOpen”设置中编写即可。 'afterOpen': function() { $( "body" ).css( "overflow-y", "hidden" );

- Bassem Zaitoun

1

你能否更清楚地表明你正在设置Featherlight中的回调函数，而不是jQuery或其他什么东西？我也没有看到这段代码在OP中确切的位置，但OP可能没有发布他们所有的代码。 - Noumenon

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Shan Robertson · Accepted Answer

为了让任何块级元素滚动，您需要给它添加 overflow:auto;，并根据您的网站/应用程序设置高度为 height:100%;。如果要禁用主内容区域的滚动，则有几种方法可以尝试，但您需要进行实验。您可以使导航栏扩展到页面的100％宽度，而您看到内容的区域则只被一个不可见元素覆盖，以阻止滚动或仅保留导航栏的滚动。点击时，还可以在主体上禁用/启用滚动。请注意，为了获得最佳效果，请在html,body上应用 overflow:hidden;，这解决了某些跨浏览器/ iOS问题。

希望这能给您一些启示！