我一直在为我学校的移动网站工作，我似乎在移动 Safari 中滚动时遇到问题。如果您访问www.caj.or.jp在你的 iPhone 上，它会滚动到页面底部，偶尔会在蓝色背景下隐藏一些页面内容。使用 Safari 检查器，我似乎正在滚动过去 <html>标签。但这是出现 Safari 滚动条的时候。滚动条在上方滚动时不会闪烁，只有在经过页面末尾时才会闪烁。任何帮助将不胜感激。
最佳答案
解决您的问题的快速方法是添加此 CSS:
body {
position:relative;
}
我可以解释正在发生的“什么”，但这似乎是一个非常特殊的情况，我对它发生的“原因”的解释可能并不准确。希望有人能够解释它或在评论中纠正我。
那么“什么”正在发生？
首先，在 Windows 上截取的这张屏幕截图更容易理解发生了什么，因为滚动条始终可见。您会看到 window 有一个滚动条，它里面是另一个带有滚动条的元素。那个内部元素确实是 <html> ，因为它有一个 height: 100% (就像 <body> )。因此，正如您所说，“下方”有一些东西向窗口 添加了一个滚动条。
这个反叛分子是<div class="ma-container"> .它位于页面底部，<html> 内容下方.它有一个 position: absolute但没有任何框偏移(顶部、左侧、底部或右侧属性)。当一个元素没有任何框偏移时，浏览器将把它定位在它有 position: static 的位置。 (默认定位)，但仍会从页面的正常流中移除。
重要的是它将根据其最近的“位置 block ”进行定位，即具有非静态位置值的第一个父级。如果没有父 block 是定位 block ，则“初始包含 block ”(将其视为 <html> 的 super 父 block )将是定位 block 。
因此，如果我们总结一下您的情况:自 .ma-container有一个绝对位置但没有框偏移(顶部，左侧，...)，浏览器确定如果元素有 position: static 元素的位置。然后将其“相对”定位到“初始包含 block ”。在这种情况下，div 应该距离“初始包含 block ”的顶部 1298 像素。因此浏览器将它定位在那里，最终位于 下方，因为此元素的高度缩短了 100%。
因此，要解决您的问题，只需制作 <body>定位元素和 div 将定位在滚动 <body> 内.
我希望这能以某种方式帮助你。
(只是为了获得额外的信息，请参阅这篇文章以了解为什么 html 和 body 有一个滚动条，就像它们有一个隐式的 overflow-y: auto : CSS overflow-x: visible; and overflow-y: hidden; causing scrollbar issue 一样)
关于html - iPhone Safari 滚动超出 html 标签，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/31507707/