我之前也踩过Mobile Safari这个滚动锁定的坑，实在是让人头疼！下面给你几个靠谱的解决方案，优先满足你想要的纯CSS方案：

纯CSS尝试方案 #

先试试同时给html和body设置溢出隐藏和固定高度，这个方法能绕过Mobile Safari对body滚动的特殊处理：

html, body {
  overflow: hidden;
  height: 100%;
}

这个设置不会修改元素定位，自然也就不会触发页面跳转到顶部的问题。需要注意的是，它只会锁定整个页面的视窗滚动，如果页面内有单独设置了overflow: auto的可滚动容器，这些容器的滚动不会被影响，刚好符合大多数场景的需求。

CSS+JS混合方案（应对纯CSS失效的场景） #

如果上面的纯CSS方法在你的项目里不生效，那可以用JS配合CSS的方式，既锁定滚动又保留当前的滚动位置：

步骤1：准备锁定样式 #

先定义一个用于锁定滚动的CSS类：

body.scroll-locked {
  overflow: hidden;
  position: fixed;
  left: 0;
  right: 0;
  width: 100%; /* 避免position: fixed导致宽度收缩 */
}

步骤2：JS控制锁定与解锁 #

• 锁定滚动时：

  // 记录当前滚动位置
  const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
  // 给body添加锁定类，并通过top属性抵消滚动偏移
  document.body.classList.add('scroll-locked');
  document.body.style.top = `-${scrollTop}px`;
  

• 解锁滚动时：

  // 获取之前保存的滚动位置
  const scrollTop = parseInt(document.body.style.top) * -1;
  // 移除锁定类，清除临时样式
  document.body.classList.remove('scroll-locked');
  document.body.style.top = '';
  // 回到之前的滚动位置
  window.scrollTo(0, scrollTop);
  

这个方案完美解决了position: fixed导致的跳顶问题，同时兼容所有主流浏览器，包括Mobile Safari。

额外小提醒 #

• 测试的时候一定要用真实的iOS设备或者Safari开发者工具的移动模拟器验证，桌面版Safari的表现和Mobile Safari可能有差异。
• 如果页面有头部固定导航，记得测试锁定滚动时导航的表现，避免出现布局错乱。

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