溢出：隐藏不与正方向的翻译一起工作答案

【问题标题】：overflow:hidden not working with translation in positive direction溢出：隐藏不与正方向的翻译一起工作
【发布时间】：2013-05-09 19:24:14
【问题描述】：

我最近在overflow: hidden; 上遇到了一件奇怪的事情。我将它设置为一个元素，然后我想用translate()转换其中的元素，当它向负方向平移时它会被隐藏，但如果我向正方向平移，它不会被隐藏。在桌面浏览器中它并没有真正显示出来，但你可以通过一点鼠标操作来达到它。而在移动设备上它只是滚动，所以这是最糟糕的。

下面是一个例子：http://cssizer.com/KLHlPShW

【问题讨论】：

我们在该页面上查看的内容是什么？
似乎在android上它工作正常，但在iOS上我可以一直滚动到具有-webkit-transform: translateX(3212px);的按钮

标签： css overflow hidden css-transforms

【解决方案1】：

所以我整天都在处理类似的事情，并意识到虽然我有

html, body {overflow:hidden; }

...如果我在 html 和正文中添加 position:absolute、position:relative 或 position:fixed，它可以解决问题。

【讨论】：

有趣，我会尝试一下，谢谢。我忘了在这里写，但我通过添加到已翻译的元素 position: fixed 解决了这个问题。
@gerhard 现在是 2016 年，我遇到了同样的问题... 位置：已修复 - 问题已解决。谢谢！

【解决方案2】：

我使用以下代码将所有内容包装在一个容器 div 中。在两个方向上适当地显式设置溢出。这可以防止 X 轴在 iOS Safari 中滚动，即使有元素被翻译到主要内容区域的右侧。

但除非添加-webkit-overflow-scrolling: touch;，否则滚动性能会显着下降。我花了很长时间才找到这个！希望它可以帮助其他人。

.scrollContainer {
  position: absolute;
  width: 100%;
  height: 100%;
  overflow-y: scroll;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
}

【讨论】：

非常感谢，伙计！像魅力一样工作

【解决方案3】：

我遇到了同样的问题，我是这样解决的：

HTML

<div id="container">        <!-- defines "boundaries" of content -->
    <div id="content">      <!-- part of it must be hidden -->
    </div>
</div>

CSS

#container {
    overflow: hidden;
    z-index: 2; 
}

#content {
    /* Translation code ...*/ 
    z-index: 1;
}

这是JSFiddle。

【讨论】：

如果我从你的小提琴中删除z-indexes，它的行为是一样的。我认为它们根本没有必要。

【解决方案4】：

遗憾的是，上述解决方案对我不起作用。就我而言，它确实尊重溢出：在 html 上使用时隐藏。所以对于那些有翻译扩展视口问题的人：

html {
overflow-x: hidden;
}

【讨论】：

这对我有用。无需像接受的答案那样设置位置。