gpt4 book ai didi

html - iPhone Safari 滚动超出 html 标签

转载 作者:可可西里 更新时间:2023-11-01 13:30:01 25 4
gpt4 key购买 nike

我一直在为我学校的移动网站工作,我似乎在移动 Safari 中滚动时遇到问题。如果您访问www.caj.or.jp在你的 iPhone 上,它会滚动到页面底部,偶尔会在蓝色背景下隐藏一些页面内容。使用 Safari 检查器,我似乎正在滚动过去 <html>标签。但这是出现 Safari 滚动条的时候。滚动条在上方滚动时不会闪烁,只有在经过页面末尾时才会闪烁。任何帮助将不胜感激。

最佳答案

解决您的问题的快速方法是添加此 CSS:

body {
position:relative;
}

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

那么“什么”正在发生?

首先,在 Windows 上截取的这张屏幕截图更容易理解发生了什么,因为滚动条始终可见。您会看到 window 有一个滚动条,它里面是另一个带有滚动条的元素。那个内部元素确实是 <html> ,因为它有一个 height: 100% (就像 <body> )。因此,正如您所说,“下方”有一些东西向窗口 添加了一个滚动条。

Browser preview which shows the two scrollbars

这个反叛分子是<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> 内.

我希望这能以某种方式帮助你。

(只是为了获得额外的信息,请参阅这篇文章以了解为什么 htmlbody 有一个滚动条,就像它们有一个隐式的 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/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com