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

【问题标题】：Horizontal scrollbar appears on ios devices when the position is fixed当位置固定时，水平滚动条出现在ios设备上
【发布时间】：2015-04-15 16:16:25
【问题描述】：

我做了一个移动导航，当用户打开它时，左边会出现什么。导航是固定的，它将内容推送到右侧。我为 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>

Javascript

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

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

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

【问题讨论】：

标签： html css-position fixed css3pie

【解决方案1】：

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

【讨论】：