溢出：隱藏不能正向翻譯

最近我碰到一個奇怪的東西，最近與overflow: hidden;。我將它設置爲一個元素，然後我想要將它中的元素與translate()進行轉換，當它向負方向翻譯時，它將被隱藏，但是如果我沿正方向翻譯，它將不會被隱藏。在桌面瀏覽器中，它並沒有真正顯示，但您可以通過一些鼠標工作來實現。而在手機上它只是卷軸，所以這是最糟糕的。溢出：隱藏不能正向翻譯

下面是一個例子顯示它：http://cssizer.com/KLHlPShW

來源

2013-05-09 gerhard

我們打算在該頁面上看到什麼？ – 2013-05-10 01:10:45

似乎在Android上它工作正常，但在iOS上，我可以一直滾動到具有'-webkit-transform：translateX（3212px）;' – gerhard 2013-05-10 08:02:48

所以我一直在使用類似的東西，整天和意識到，雖然我有

html, body {overflow:hidden; }

...如果我添加position:absolute或position:relative到html和body，它修復了這個問題。

來源

2013-07-06 02:32:21 daleyjem

的按鈕，我會嘗試一下，謝謝。我忘了寫在這裏，但我解決了這個問題，增加了翻譯後的元素「position：fixed」。 – gerhard 2013-07-12 14:11:48

@gerhard現在是2016年，我有同樣的問題......職位：固定 - 問題已解決。謝謝！ – Edgar 2016-06-21 17:46:13

我用下面的代碼將所有內容包裝在容器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; 
}

來源

2016-08-12 05:54:21

非常感謝，老兄！像魅力一樣工作 – 2017-04-06 18:54:01

@DemvenWeir不客氣！^_ ^ – 2017-04-07 19:27:24

我有完全相同的問題，這裏是我固定它：

HTML

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

CSS

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

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

這裏是一個JSFiddle 。

來源

2017-05-22 19:33:57 Matthias

溢出：隱藏不能正向翻譯

回答

相關問題