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设备上会出现水平滚动条

1 个答案: