OGeek|极客世界-中国程序员成长平台

标题: html - 滚动时iOS Safari上的奇怪阻止 [打印本页]
作者: 菜鸟教程小白    时间: 2022-12-11 19:04
标题: html - 滚动时iOS Safari上的奇怪阻止

在尝试解决浏览器上某些幻灯片的一些问题时，我发现所有浏览器都可以正常工作，但 iOS 版 Safari 却不行。

令人惊讶的是，它不会在 Mac Safari 的响应模式下发生，它只会发生在 iOS 上。

enter image description here

奇怪的行为是，一旦您到达页面底部，部分内容就会被覆盖。如果到达底部后再次滚动，您现在就可以滚动了。如果您此时向上滚动，也会发生同样的情况。

可重现的最小测试用例:

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 .有谁知道这里发生了什么以及如何解决它？


Best Answer-推荐答案


我遇到了同样的问题，显然这是由于 '100vh' 和 ios safari 的错误。一旦我更改为“100%”，一切都很好，这取决于您需要在哪里使用视口(viewport)高度，但这可能并不总是可行的。

引用:http://webdesignerwall.com/tutorials/css-fix-for-ios-vh-unit-bug

虽然其他网站似乎暗示这可能不再是一个错误。

关于html - 滚动时iOS Safari上的奇怪阻止，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/42486150/





欢迎光临 OGeek|极客世界-中国程序员成长平台 (http://jike.in/) Powered by Discuz! X3.4