Off-Canvas 菜单的 Css overflow-x 问题答案

【问题标题】：Css overflow-x issue for Off-Canvas menuOff-Canvas 菜单的 Css overflow-x 问题
【发布时间】：2013-08-19 14:28:48
【问题描述】：

我正在尝试创建应从右侧显示的 Off-canvas 菜单。在我的 body 元素中，我的菜单有一个导航标签。 Nav 标记具有绝对位置和权利属性设置为负值，因为它应该在浏览器的窗口之外。 Body 的宽度为 100%，overflow-x 设置为隐藏。我使用 jquery 在 body 元素上切换 css 'opened' 类，它将 body 向左移动并出现 nav。

HTML部分：

<a href="#" class="openMenu">MENU</a>
    <nav>
        <ul>
            <li><a href="#">Link 1</a></li>
            <li><a href="#">Link 1</a></li>
            <li><a href="#">Link 1</a></li>        
        </ul>
    <nav>

CSS 部分：

body{
    position: relative;
    overflow-x: hidden;
    width: 100%;
    left: 0;
    top: 0;
    background: orange;
}

body.opened{
    left: -150px;
}

nav{
    position: absolute;
    right: -150px;
    top:0;
    background: grey;
    width: 150px;
    z-index: 99999;
}

body, body.opened{
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
     transition: all 0.3s ease-in-out;
}

a.openMenu{
    position: absolute;
    top: 0;
    left: 50%;
    color: white;
}

ul{
    list-style: none;
}

nav ul li a{
    color: white;
}

jQuery部分：

$('a.openMenu').click(function(){
    $('body').toggleClass('opened');
    return false;
});

如下所示：http://jsfiddle.net/EwCVH/
实例：http://vital-element.com

在 PC 上一切正常，但是当我在手机上打开它时，overflow-x 属性不再起作用，我可以水平滚动并查看我隐藏的导航，它应该只在点击时打开。

我尝试在 html 标签中添加隐藏的 overflow-x 属性，它确实隐藏了触摸设备上的水平滚动，但是当我尝试打开菜单时，只有主体向左移动，菜单被溢出属性隐藏（我认为） .

有什么建议吗？谢谢。

【问题讨论】：

标签： css mobile screen overflow document-body

【解决方案1】：

没有科学解释但是改变滑动nav元素位置来解决这个问题，android不再认为nav是viewport的一部分。

现在我使用 2 个具有正确属性的类，我使用 jquery 更改它们，具体取决于菜单位置。

.menuRight{
    right: -150px;
 }

 .menuLeft{
    right: 0px;
 }

【讨论】：