如何修复画布外菜单的滚动？

Question

I have an off-canvas menu. 我有一个画布菜单。 You can see that when the menu is open you can scroll the whole page as normal. 您会看到打开菜单时可以正常滚动整个页面。 But what I want is when the menu is open you can't scroll any other part of the page but only the menu. 但是我想要的是，当菜单打开时，您不能滚动页面的任何其他部分，而只能滚动菜单。 How can I do that please? 我该怎么办？

JsFiddle Example JsFiddle示例

<div class="soround">
    <div class="m-nav-container">
        <nav>
            <p>content</p>
            <p>content</p>
            ...
        </nav>
    </div>
    <div class="other">
    <button class="m-nav-opener">MENU</button>
            <p>content</p>
            <p>content</p>
            ...
    </div>
</div>

Answer 1

You can set all the containers to height:100% , and set overflow:hidden to the <body> tag when the menu is open, so that to disable the scroll on the content area. 您可以将所有容器设置为height:100% ，并在打开菜单时将overflow:hidden设置为<body>标记，以便禁用内容区域上的滚动。

JSFIDDLE DEMO JSFIDDLE演示

 $(function () { $(".m-nav-opener").click(function () { if ($("body").hasClass("m-nav-open")) { $("body").removeClass("m-nav-open"); } else { $("body").addClass("m-nav-open"); } }); });

 html, body, .soround { height: 100%; } .m-nav-container { background: silver; position: fixed; z-index: 1; width: 300px; height: 100%; left: -300px; top: 0; overflow-y: auto; overflow-x: hidden; } .m-nav-open { transform: translateX(300px); overflow: hidden; }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <div class="soround"> <div class="m-nav-container"> <nav> <p>menu</p><p>menu</p><p>menu</p><p>menu</p><p>menu</p><p>menu</p><p>menu</p><p>menu</p><p>menu</p><p>menu</p><p>menu</p><p>menu</p><p>menu</p><p>menu</p><p>menu</p><p>menu</p><p>menu</p><p>menu</p><p>menu</p><p>menu</p> </nav> </div> <div class="other"> <button class="m-nav-opener">MENU</button> <p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p> </div> </div>

如何修复画布外菜单的滚动？

问题描述

1 个解决方案

解决方案1
0 已采纳 2015-07-09 22:24:55

如何修复画布外菜单的滚动？

问题描述

1 个解决方案

解决方案1 0 已采纳 2015-07-09 22:24:55

解决方案1
0 已采纳 2015-07-09 22:24:55