使用position: fixed阻止iPhone页面滚动时保存滚动位置

这个问题我之前做移动端项目时也踩过坑——模拟器里表现完美，但到了iPhone真机的Safari和Chrome就失效，核心原因在于iOS的滚动机制和桌面端/模拟器存在差异，具体来说：

为什么真机和模拟器不一样？ #

• iOS Safari（包括Chrome for iOS，它基于WebKit内核）的滚动是由window层级负责的，而不是body或html元素。直接给body设置position: fixed，模拟器可能会完全阻止滚动，但真机里iOS的橡皮筋滚动（bounce scroll）特性仍然会让页面有滚动空间，甚至会重置window.scrollY的值，导致你保存的滚动位置失效。
• 模拟器没有完全复现iOS的滚动行为细节，比如fixed元素触发的滚动偏移重置，或者overflow: hidden对window滚动的限制力度。

可行的解决方案 #

我试过几种方法，下面这个是最稳定的，兼顾了滚动锁定和位置恢复：

步骤1：记录滚动位置 + 锁定滚动 #

打开菜单时，先保存当前滚动位置，然后通过overflow: hidden锁定html和body，同时阻止window的touchmove事件（避免iOS橡皮筋滚动），但要允许菜单内部的滚动：

// 全局变量保存滚动位置
let lockedScrollPosition = 0;

function openMobileMenu() {
  // 1. 保存当前滚动位置（一定要在修改DOM前保存！）
  lockedScrollPosition = window.scrollY;
  
  // 2. 锁定html和body的滚动
  document.documentElement.style.overflow = 'hidden';
  document.body.style.overflow = 'hidden';
  
  // 3. 阻止window层面的touchmove，防止iOS橡皮筋滚动
  window.addEventListener('touchmove', preventPageScroll, { passive: false });
}

// 阻止页面滚动，但允许菜单内部滚动
function preventPageScroll(e) {
  // 替换成你的菜单容器选择器
  if (!e.target.closest('.mobile-menu')) {
    e.preventDefault();
  }
}

步骤2：恢复滚动位置 + 解锁滚动 #

关闭菜单时，先恢复overflow属性，移除touchmove监听，最后精准恢复滚动位置：

function closeMobileMenu() {
  // 1. 解锁html和body的滚动
  document.documentElement.style.overflow = '';
  document.body.style.overflow = '';
  
  // 2. 移除touchmove监听
  window.removeEventListener('touchmove', preventPageScroll);
  
  // 3. 恢复之前的滚动位置
  window.scrollTo(0, lockedScrollPosition);
}

额外注意事项 #

• 一定要在修改DOM（比如设置fixed或overflow）之前保存window.scrollY，否则iOS会在设置fixed后立即重置scrollY，导致你保存的是0而不是真实位置。
• 如果你的菜单内部需要滚动，一定要在preventPageScroll函数里判断触摸目标是否在菜单内，避免菜单自身的滚动被阻止。
• 不要依赖position: fixed来完全阻止滚动，iOS对fixed元素的处理和桌面端差异很大，结合overflow: hidden+touchmove阻止才是更可靠的方式。

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