溢出-x：隐藏；不适用于安卓设备

Question

我得出的结论是，这是一个只有 android 的问题，是由我的导航菜单的工作方式引起的，并且我已经没有想法可以尝试了。菜单从左侧推到 100% 以隐藏菜单。然后我使用 css 过渡让菜单从右侧滑出到窗口的 80%。切换菜单后，它会在隐藏菜单的右侧留下一个空旷的空间。我不能使用 display: none;因为它会杀死动画。重要问题仅在切换菜单后才会发生。

我试过了：

• SO Q1

• SO Q2

• SO Q3

• SO Q4

• body、html、wrapper、.searchCont 等溢出。

2014 年 2 月 6 日更新

这里是导航菜单css：

ul.subNav {
    position: absolute;
    top: 70px;
    left: 100%;
    transition: all 0.6s ease;
    -webkit-transition: all 0.6s ease;
    -moz-transition: all 0.6s ease;
    -ms-transition: all 0.6s ease;
    visibility: hidden;
    width: 80%;
    background: #f7f7f7;
    border-left: 5px solid #00529f;
    z-index: 100;
}

结束更新

这是css：

.wrapper {
    max-width: 100%;
    height: 100%;
    background: #20aad7;
    background: url("../images/bg.png"), -moz-linear-gradient(-45deg, #20aad7 0%, #54709f 31%, #64b491 65%, #047074 100%);
    background: url("../images/bg.png"), -webkit-gradient(linear, left top, right bottom, color-stop(0%,#20aad7), color-stop(31%,#54709f), color-stop(65%,#64b491), color-stop(100%,#047074));
    background: url("../images/bg.png"), -webkit-linear-gradient(-45deg, #20aad7 0%,#54709f 31%,#64b491 65%,#047074 100%);
    background: url("../images/bg.png"), -o-linear-gradient(-45deg, #20aad7 0%,#54709f 31%,#64b491 65%,#047074 100%);
    background: url("../images/bg.png"), -ms-linear-gradient(-45deg, #20aad7 0%,#54709f 31%,#64b491 65%,#047074 100%);
    background: url("../images/bg.png"), linear-gradient(135deg, #20aad7 0%,#54709f 31%,#64b491 65%,#047074 100%);
    background-repeat: repeat;
    overflow-x: hidden;
}

最后，这是一个小提琴/直播网站：Demo-fiddle/Demo-live-site

---

这是问题的样子：

Answer 1

在处理 ionic 项目时，我在 Android 上遇到了同样的问题。我为解决这个问题所做的就是将{overflow-x:hidden} 放在子元素上。

Answer 2

遇到了同样的问题，将 overflow-x: hidden 应用到 html 和 body 在 Android 中没有做任何事情。将一个容器 div 放在你的 body 中，并让它包裹页面上的所有内容。向该容器 div 添加一个溢出-x：隐藏，问题就解决了。

Answer 3

我遇到了同样的问题，我在这里合并了一些答案，所以感谢大家的意见！这是我所做的：

body{ 
    overflow-x:hidden; 
}
.menu{
    position: fixed;
    z-index: 1;
    width: 340px;
    max-width: 85%;
    top: 0px;
    right: -340px;
}
.menu.open{ 
    right:0; 
    position:absolute; 
}

设置position:fixed; 似乎可以解决问题，所以当我想要打开菜单时（在我的情况下，fixed 的位置并不理想）我将其设置为absolute。如前所述，您还可以切换visibility 甚至设置display:none。这仅在 Chrome for android 上进行了测试。

Answer 4

在过去的几天里，我们一直在与我的朋友（事实证明，@user3310612 :)）在工作中遇到同样的问题。绝对无法理解为什么向右移动菜单的每一种方式（尤其是变换，它不应该影响布局）都使页面在 Android 上可滚动。

今天在看到overflow-x 无法在 Android 上运行的帖子后，我只是随机问“如果你只使用 overflow:hidden 会发生什么。期望 - 右菜单被剪掉，但也可能页面残缺和破碎/向下滚动。现实——完美运行。

所以，对我们来说，最上面的#container 上的overflow:hidden 解决了这个问题。 20 分钟前 :)

Answer 5

尝试替换

overflow-x: hidden;

overflow: hidden;

我遇到了同样的问题，它对我有用。

Answer 6

我猜你的“问题”来自visibility: hidden/ visible。

正如the spec 所说：“隐藏 - 生成的框是不可见的（完全透明，没有绘制任何内容），但仍然影响布局。”

尝试使用

display: none|block;

改为。

或者，如果您将菜单推到屏幕外的左侧（而不是右侧），则可以避免整个事情。

顺便说一句：指向您的实时站点的链接不起作用，并且您在 JSFiddle 上的 HTML 标记中存在一些错误（例如，结束 </span> 标记）并且您的 CSS 有优化空间。 ;-)

Answer 7

我找到了一个目前可以使用的选项。 （将留下未标记以获得更好的答案）

我最终制作了菜单和导航图标position: fixed;，因为我希望在用户滚动页面时将菜单固定在同一位置，以防止菜单看起来很尴尬。

这只是由于position: fixed; 而解决了我的问题，因为它将整个元素从工作流程中取出，就好像它不存在一样。然后身体不会感知到元素在那里，所以你不能再滚动到右侧。

ul.subNav {
    position: fixed;
    top: 0;
    left: 100%;
    transition: all 0.6s ease;
    -webkit-transition: all 0.6s ease;
    -moz-transition: all 0.6s ease;
    -ms-transition: all 0.6s ease;
    visibility: hidden;
    width: 80%;
    height: 100%;
    background: #f7f7f7;
    border-left: 5px solid #00529f;
    z-index: 100;
}

ul.subNav.active {
    left: 20%;
    visibility: visible;
}

Answer 8

你需要

#wrapper {position:absolute;}