iOS Safari弹窗时阻止地址栏重现的解决方案（仿Airbnb）

你的核心问题是iOS Safari中，设置position: fixed会触发视口高度重置，导致地址栏弹出、内容位移。以下是接近Airbnb实现思路的优化方案，以及替代方案：

优化原有Fixed定位方案 #

原方法的问题出在inset: 0的全局定位触发了iOS的视口重计算，调整为动态定位+精准滚动偏移可以解决：

1. 调整CSS类，移除inset依赖

html {
  height: 100vh;
  overflow-y: scroll;
  -webkit-overflow-scrolling: touch; /* 维持iOS滚动流畅度 */
}

body {
  margin: 0;
  min-height: 100vh;
}

.locked {
  overflow: hidden;
  position: fixed;
  width: 100%; /* 确保宽度不收缩 */
}

2. 精准控制滚动偏移与定位

// 打开模态框时
const scrollOffset = window.scrollY;
document.body.classList.add('locked');
// 动态设置top值，抵消当前滚动位置，避免视口跳转
document.body.style.top = `-${scrollOffset}px`;

// 关闭模态框时
document.body.classList.remove('locked');
// 先移除fixed定位，再恢复滚动位置
window.scrollTo(0, scrollOffset);
document.body.style.top = '';

这种方式避免了inset: 0触发的视口重置，同时通过动态top值保持当前视图位置，减少地址栏跳动。

替代方案：无Fixed的滚动锁定 #

如果fixed方案仍有兼容性问题，可通过事件拦截实现滚动锁定，完全避免定位变化：

1. CSS控制body溢出

.locked {
  overflow: hidden;
  height: 100vh;
  position: relative;
}

2. 拦截touchmove事件，区分模态框内外

let modalActive = false;

const blockBackgroundScroll = (e) => {
  // 仅当模态框打开，且触摸目标不在模态框内容内时，阻止滚动
  if (modalActive && !e.target.closest('.modal-content')) {
    e.preventDefault();
  }
};

// 打开模态框
modalActive = true;
document.body.classList.add('locked');
document.addEventListener('touchmove', blockBackgroundScroll, { passive: false });

// 关闭模态框
modalActive = false;
document.body.classList.remove('locked');
document.removeEventListener('touchmove', blockBackgroundScroll);

该方案不会改变body定位，彻底避免视口高度变化导致的地址栏问题，但需确保模态框内部的滚动不受影响（通过closest('.modal-content')判断）。

关键细节 #

• 不要同时给html和body添加locked类，仅操作body即可，避免定位冲突。
• iOS下务必保留-webkit-overflow-scrolling: touch，否则滚动会失去流畅的弹性效果。
• 关闭模态框时，必须先移除locked类再调用window.scrollTo，否则fixed状态下滚动操作无效。

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