Css 溢出：隐藏，不使用正向翻译

我最近在

overflow中遇到了一件奇怪的事情：隐藏。我将它设置为一个元素，然后我想用
translate（）
转换其中的元素，当它以负方向转换时，它将被隐藏，但如果我以正方向转换，它将不会被隐藏。在桌面浏览器中，它并没有真正显示出来，但您只需使用一点鼠标即可访问它。而在手机上，它只是滚动，所以这是最糟糕的

这里有一个例子说明了这一点：
所以我整天都在做类似的事情，并且意识到

html，正文{溢出：隐藏；}

…如果我在html和正文中添加
position:absolute
、
position:relative
或
position:fixed
，它就解决了问题。
我用以下代码将所有内容包装在容器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;
}

我遇到了完全相同的问题，下面是我如何解决的：

HTML

这里有一个问题。
遗憾的是，上述解决方案对我不起作用。
在我的例子中，它确实尊重溢出：在html上使用时隐藏。
因此，对于那些有平移扩展视口问题的人：

html {
overflow-x: hidden;
}

在那个页面上我们想看什么？看起来在android上它工作得很好，但在iOS上我可以一直滚动到有
-webkit transform:translateX（3212px）的按钮有趣，我会尝试一下，谢谢。我忘了在这里写，但我通过添加到翻译元素
位置：fixed
@gerhard这是2016年，我也有同样的问题。。。位置：已修复-问题已解决。非常感谢。谢谢你，伙计！工作原理与charmIf类似。如果我从小提琴中移除
z-index
es，它的行为也一样。我认为根本没有必要。这对我来说很有效。无需设置已接受答案中的位置。
#container {
    overflow: hidden;
    z-index: 2; 
}

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

html {
overflow-x: hidden;
}