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

Question

我做了一个手机导航，当用户打开它时，它出现在左侧。导航是固定的，它将内容推到右边。我为正文添加了 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/

Answer 1

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

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

Horizontal scrollbar appears on ios devices when the position is fixed

html

fixed

css-position

css3pie