iPhone Safari在html标记之外滚动

我一直在学校的移动网站上工作，似乎在移动Safari中滚动有问题。如果你在iPhone上访问，它会滚动到页面底部，偶尔会在蓝色背景下隐藏一些页面内容。使用Safari inspector，我似乎正在滚动通过

标记。但此时会出现Safari滚动条。当在上面滚动时，滚动条不会闪烁，只有在经过页面末尾时才会闪烁。任何帮助都将不胜感激。

您的问题的快速解决方案是添加以下CSS：

body {
    position:relative;
}

我可以解释“发生了什么”，但这似乎是一个非常特殊的情况，我对“为什么”的解释可能并不准确。希望有人能解释一下，或者在评论中纠正我

那么“发生了什么”呢

首先，在Windows上拍摄的这个屏幕截图更容易理解，因为滚动条总是可见的。您可以看到窗口有一个滚动条，其中有另一个带有滚动条的元素。这个内部元素实际上是

，因为它有一个

高度：100%

（就像

）。所以，正如你所说，下面有一个东西在窗口中添加了一个滚动条

此元素是

。它位于页面底部，在

的内容下方。它有一个

位置：绝对
，但没有任何框偏移（顶部、左侧、底部或右侧属性）。当一个元素没有任何框偏移时，浏览器会将其定位在具有
位置：static
（默认定位）的位置，但它仍会从页面的正常流程中删除

重要的是，它将根据其最近的“位置块”进行定位，即具有非静态位置值的第一个父对象。如果没有父对象是定位块，则“初始包含块”（就像查看
的超级父对象一样）将是定位块

因此，如果我们总结一下您的情况：由于
.ma container
有一个绝对位置，但没有框偏移（顶部、左侧，…），浏览器将确定元素的位置（如果它有
位置：static
），然后将其“相对”定位到“初始包含块”。在这种情况下，div应该是距离“初始包含块”顶部1298像素。因此，浏览器将其定位在该位置，该位置最终位于下方，因为该元素的高度缩短为100%

因此，要解决您的问题，只需将
设为定位元素，div将定位在滚动的
中

我希望这对你有所帮助

（为了获得更多信息，请参阅本文以确切了解为什么
html
和
body
有一个滚动条，就像它们有一个隐式的
overflow-y:auto
：）
为什么不删除属性
overflow-x:hidden来自
html
tag？谢谢，这就是原因。现在，我必须找到另一种方法来防止它们横向滚动，否则我只能允许它。编辑：看起来把
overflow-x:hidden
放在我的
#pageContainer
div上就可以了。非常感谢@Xavier。你的透彻解释很有帮助。在@CaioTarifa的帮助下，我从
html
标记中删除了
overflow-x:hidden
，但滚动条仍然没有显示出来，我还是有点失望。将
position:relative
添加到
body
标记后，滚动条将返回。在购买搜索引擎后，我对网页中添加的
.ma容器
感到不满意，这对我来说改善了这种情况。我已经离开了
.ma容器
，目前没有偏移量。再次感谢你的帮助。