html - 滚动时iOS Safari上的奇怪阻止
<p><p>在尝试解决浏览器上某些幻灯片的一些问题时，我发现所有浏览器都可以正常工作，但 iOS 版 Safari 却不行。 </p>
<p>令人惊讶的是，它不会在 Mac Safari 的响应模式下发生，它只会发生在 iOS 上。 </p>
<p> <a href="https://i.imgur.com/Om5V0ag.gif" rel="noreferrer noopener nofollow"><img src="https://i.imgur.com/Om5V0ag.gif" alt="enter image description here"/></a> </p>
<p>奇怪的行为是，一旦您到达页面底部，部分内容就会被覆盖。如果到达底部后再次滚动，您现在就可以滚动了。如果您此时向上滚动，也会发生同样的情况。</p>
<p>可重现的最小测试用例:</p>
<pre><code>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;
}
</code></pre>
<p>标记是这样的:</p>
<pre><code><body>
<div id="test">
<p>Lots of p</p>
<p>Lots of p</p>
<p>Lots of p</p>
</div>
</body>
</code></pre>
<p>具有可重现案例的 JSBin 是 <a href="https://output.jsbin.com/corohupaye" rel="noreferrer noopener nofollow">this</a> .有谁知道这里发生了什么以及如何解决它？</p></p>
<br><hr><h1><strong>Best Answer-推荐答案</ strong></h1><br>
<p><p>我遇到了同样的问题，显然这是由于 '100vh' 和 ios safari 的错误。一旦我更改为“100%”，一切都很好，这取决于您需要在哪里使用视口(viewport)高度，但这可能并不总是可行的。</p>
<p>引用:<a href="http://webdesignerwall.com/tutorials/css-fix-for-ios-vh-unit-bug" rel="noreferrer noopener nofollow">http://webdesignerwall.com/tutorials/css-fix-for-ios-vh-unit-bug</a> </p>
<p>虽然其他网站似乎暗示这可能不再是一个错误。</p></p>
<p style="font-size: 20px;">关于html - 滚动时iOS Safari上的奇怪阻止，我们在Stack Overflow上找到一个类似的问题：
<a href="https://stackoverflow.com/questions/42486150/" rel="noreferrer noopener nofollow" style="color: red;">
https://stackoverflow.com/questions/42486150/
</a>
</p>
页:
[1]