iOS 15 Safari内嵌可滚动元素触发工具栏自动隐藏问题咨询

行为属性判定 #

这是iOS 15及以上版本Safari的预期设计，属于苹果调整移动端浏览器交互逻辑的官方设计，目标是在用户滚动页面时自动隐藏工具栏，扩大内容可视区域。但该设计没有针对非body的内部滚动容器做特殊适配，只要是可滚动元素的滚动行为都会触发工具栏伸缩和视口resize，不符合多数前端开发者的预期，也造成了大量依赖固定视口高度的页面布局异常。

可用规避方案 #

• 方案1：为内部滚动容器添加overscroll-behavior: contain CSS属性，该属性可以阻止滚动行为向上冒泡到根视口，从根源上避免触发Safari的工具栏伸缩逻辑，适配iOS 15.4及以上版本，是目前改造成本最低的方案。
• 方案2：彻底禁用body滚动，固定根视口高度，所有滚动逻辑都收拢到自定义内部滚动容器中：

html, body {
  height: 100vh;
  overflow: hidden;
}
/* 内部滚动容器自行设置overflow: scroll和对应高度即可 */

该方案兼容所有iOS 15版本，适合全页自定义滚动的业务场景。

• 方案3：监听resize事件做兼容处理，页面初始化时缓存初始视口高度，检测到是iOS Safari环境时，所有依赖视口高度的元素尺寸都使用缓存的初始值计算，不随resize事件更新，避免布局错乱。

内容的提问来源于stack exchange，提问作者Alex Fox