当位置固定时，ios 设备上会出现水平滚动条

Question

我做了一个移动导航，当用户打开它时，它出现在左侧。导航是固定的，它将内容推向右侧。我为 body 添加了overflow:hidden，它删除了桌面上的滚动条，但没有删除 ios 上的滚动条。

风格：

body{
    padding:0;
    margin:0;
    overflow:hidden;
}
.opened-navigation#navigation {
    -webkit-transform: translate(0, 0);
    -moz-transform: translate(0, 0);
    transform: translate(0, 0);
}
#navigation {
    width:240px;
    position:fixed;
    left:0;
    top:0;
    height:100%;
    background:yellow;
    -webkit-transform: translate(-100%, 0);
    -moz-transform: translate(-100%, 0);
    transform: translate(-100%, 0);
}
.opened-navigation#content {
    -webkit-transform: translate(240px, 0);
    -moz-transform: translate(240px, 0);
    transform: translate(240px, 0);
}
#content {
    background:red;
}

.HTML

<div id="navigation">Nav</div>
<div id="content">Content
    <strong><a href="" id="opennav">Open Navigation</a></strong>
</div>

爪哇语

$(document).ready(function(){
    $('#opennav').click(function(e){
        e.preventDefault();
        $('#navigation, #content').toggleClass('opened-navigation');
    });
});

当我为 html 添加overflow:hidden时，它可以工作，但在桌面上它会裁剪我的一些元素。解决方案是什么？

在线版：http://psd-labs.com/demo/

Answer 1

我position:relative;添加到body。我不知道为什么，但它解决了问题。