当标签栏位于顶部时，固定元素的 iOS 15 溢出问题答案

【问题标题】：iOS 15 overflow issue for fixed elements when Tab Bar is positioned top当标签栏位于顶部时，固定元素的 iOS 15 溢出问题
【发布时间】：2021-12-30 07:27:22
【问题描述】：

当标签栏位于顶部而不是底部（新的默认设置）时，iOS 15 似乎存在溢出固定元素的问题。

例如，我有一个很长的Bootstrap 5 Modal，底部有按钮，因此用户在隐藏 Safaris UI 的模式中滚动，然后当尝试单击按钮 iOS 时，强制 Safari 的 UI 回到视图中按钮无法访问。请参阅下面的 gif 示例（适用于低质量，有文件大小限制）...

在上面的 gif 中，您可以看到 Safari 的 UI 在我滚动并点击“关闭”按钮时跳进跳出。

在此处查看示例：https://thelevicole.com/ios-15-overflow-issue/

此处的示例代码：https://github.com/thelevicole/ios-15-overflow-issue/blob/main/index.html

我在这里发现了一个类似的问题：iOS 15 safari toolbar now hides when scrolling within an element，cmets 链接到 Apple video，突出了 CSS env variables 的使用，所以我尝试将安全区域插入添加到模态的顶部和底部...

.modal {
    padding-top: env(safe-area-inset-top, 0px);
    padding-bottom: env(safe-area-inset-bottom, 0px);
}

这似乎没有任何影响。

请注意，我的示例并不是唯一一次出现此问题，我几乎在每个具有溢出固定元素（即 cookie 首选项等）的网站上都遇到了相同的问题。

是否有解决方案或者这是应该提交给 Apple 的错误？

【问题讨论】：

标签： html css ios safari ios15

【解决方案1】：

我为我的案例解决了这个问题。也许它也会对你有所帮助。

body-scroll-lock库https://github.com/willmcpo/body-scroll-lock

工作视频示例：

使用库前（痛）：https://truewebstories.ru/sites/default/files/0my_files/blog/2022/scroll-safari-15/before.MP4

之后：https://truewebstories.ru/sites/default/files/0my_files/blog/2022/scroll-safari-15/after.MP4

在打开该菜单后，我会阻止除“汉堡菜单”（侧边菜单）之外的所有内容滚动。当菜单关闭时，所有滚动锁定都被释放。

感谢 willmcpo https://github.com/willmcpo 和谷歌翻译...

PS：看这个issuehttps://github.com/willmcpo/body-scroll-lock/issues/236说如果你通过npm安装库，问题就解决不了了。您需要从 GitHub 下载它 - 然后就可以了。

【讨论】：