如何滚动“溢出：隐藏；”在隐藏侧边菜单的同时在身体上？答案

【问题标题】：How do I scroll with "overflow: hidden;" on body while keeping the side menu hidden?如何滚动“溢出：隐藏；”在隐藏侧边菜单的同时在身体上？
【发布时间】：2014-07-30 20:44:53
【问题描述】：

我有“溢出：隐藏；”在 body 上保持滑动菜单隐藏在滚动/视图中。

我想保持原样，但启用垂直滚动：

http://jsfiddle.net/stritar/RWmW5/

  <body>
    <div class="container">
        <div id="sidebar">
            <ul>
                <li><a class="primary_menu" href="#">LINK</a></li>
                <li><a class="secondary_menu" href="#">Link small</a></li>
            </ul>
        </div>
        <div class="main-content">
            <div class="swipe-area"></div>
            <div id="sidebar-toggle">
                <svg data-toggle=".container" class="inline-svg" width="42px" height="42px" viewBox="0 0 42 42" enable-background="new 0 0 32 22.5" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"      xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
                <!-- Generator: Sketch 3.0.4 (8054) - http://www.bohemiancoding.com/sketch -->
                <title>Group</title>
                <desc>Created with Sketch.</desc>
                <defs></defs>

                <g class="svg-menu-toggle" sketch:type="MSLayerGroup">
                <circle class="round" fill="#3B3B41" sketch:type="MSShapeGroup" cx="21" cy="21" r="21"></circle>
                <rect class="bar" fill="#F2F2F2" sketch:type="MSShapeGroup" x="12" y="26" width="18" height="4"></rect>
                <rect class="bar" fill="#F2F2F2" sketch:type="MSShapeGroup" x="12" y="19" width="18" height="4"></rect>
                <rect class="bar" fill="#F2F2F2" sketch:type="MSShapeGroup" x="12" y="12" width="18" height="4"></rect>
                </g>

                </svg>  
            </div>

            <div class="intro">

            </div>
            <section class="test">
                test
            </section>
        </div>
    </div>

【问题讨论】：

考虑以不同的方式隐藏菜单，以确保它在您需要时始终隐藏。使用display: none 完全移除容器，然后在切换时使用display: block 再次显示。

标签： jquery html css

【解决方案1】：

设置overflow-x: hidden:

body, html {
height: 100%;
margin: 0;
font-family: helvetica;
font-weight: 100;
overflow-x: hidden;
}

还有 jsFiddle：http://jsfiddle.net/stritar/RWmW5/

【讨论】：

【解决方案2】：

body, html {
    height: 100%;
    margin: 0;
    font-family: helvetica;
    font-weight: 100;
    overflow-x: scroll;
}

【讨论】：

你必须启用垂直滚动吧？？如果是这样放溢出-x：滚动
请考虑在您的答案中添加解释以改进它。

【解决方案3】：

试试：overflow-x: hidden; body, html

【讨论】：