iOS上的奇怪阻止滾動上的Safari瀏覽器

在嘗試修復瀏覽器上某些幻燈片的某些問題時，我達到了所有瀏覽器都能正常工作的程度，但Safari for iOS卻沒有。iOS上的奇怪阻止滾動上的Safari瀏覽器

令人驚訝的是，它沒有發生在響應模式的Mac Safari上，它只發生在iOS上。

奇怪的行爲是，一旦你到達頁面的底部，部分內容被覆蓋。如果您在到達底部時再次滾動，則可以立即滾動。如果你在這一點上滾動，它會發生相同的情況。

最小測試情況中，這是可重複的：

html, 
body, 
main { 
    width: 100vw; 
    height: 100vh; 
    overflow: hidden; 
} 


#test { 
    height: 100vh; 
    overflow-x: hidden; 
    overflow-y: scroll; 
    -webkit-overflow-scrolling: touch; 
} 

p { 
    padding: 20px 0; 
}

標記是這樣的：

<body> 
    <div id="test"> 
    <p>Lots of p</p> 
    <p>Lots of p</p> 
    <p>Lots of p</p> 
    </div> 
</body>

JSBin具有可重複的情況下，this。有誰知道這裏發生了什麼，以及如何解決它？

來源

2017-02-27 Antonio Laguna

我有同樣的問題！有沒有解決方法？ –

我有同樣的問題，顯然這是由於'100vh'和ios safari的錯誤。一旦我改變爲'100％'，一切都很好，這取決於你需要使用視口高度的位置，但這可能並不總是可能的。

裁判：http://webdesignerwall.com/tutorials/css-fix-for-ios-vh-unit-bug

雖然其他網站似乎在暗示這可能不再是一個錯誤。

來源

2018-01-10 23:37:22 Sam0

iOS上的奇怪阻止滾動上的Safari瀏覽器

回答

相關問題