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

Question

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

这是一个显示它的示例： http: //cssizer.com/KLHlPShW

Answer 1

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

html, body {overflow:hidden; }

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

Answer 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;
}

Answer 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。

Answer 4

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

html {
overflow-x: hidden;
}