如何在iOS上禁用屏幕下拉时的弹跳及页面刷新效果？

针对全屏3D Web应用遇到的下拉弹跳、刷新干扰体验，但又需要保留正常滚动的问题，以下是几个经实测有效的方案：

方案一：正确配置overscroll-behavior（优先推荐） #

很多时候overscroll-behavior: none无效，是因为没有给正确的元素设置，或是未建立正确的滚动上下文。按以下步骤配置：

1. 先将根元素设为全屏且隐藏溢出，避免body成为滚动容器：

html, body {
  height: 100vh;
  margin: 0;
  overflow: hidden;
}

2. 给需要滚动的内容容器设置独立滚动，并禁用过度滚动效果：

.scroll-content {
  height: 100vh;
  overflow-y: auto;
  /* 仅禁用垂直方向的过度滚动（弹跳、刷新） */
  overscroll-behavior-y: none;
}

这样配置后，滚动行为被限制在.scroll-content容器内，iOS的全局下拉弹跳和刷新会被屏蔽，同时不影响容器内的正常滚动。

方案二：iOS Safari专属JS兜底方案 #

如果CSS方案仍不生效（部分iOS旧版本可能存在兼容性），可以通过触摸事件精准拦截不必要的操作：

const scrollContainer = document.querySelector('.scroll-content');
let startY = 0;

scrollContainer.addEventListener('touchstart', (e) => {
  startY = e.touches[0].clientY;
});

scrollContainer.addEventListener('touchmove', (e) => {
  const currentY = e.touches[0].clientY;
  const scrollTop = scrollContainer.scrollTop;
  // 仅当容器已滚到顶部，且用户继续下拉时阻止默认行为
  if (scrollTop === 0 && currentY > startY) {
    e.preventDefault();
  }
});

该方法不会影响正常的上下滚动，只是拦截了顶部的下拉弹跳触发逻辑，同时避免全局阻止touchmove导致的交互异常。

补充说明 #

• 旧的纯CSS方案（如设置-webkit-overflow-scrolling: touch配合其他属性）只适配iOS 9及更早版本，现在已失效，无需再尝试。
• 若你的应用是PWA，在manifest.json中添加"display": "standalone"，iOS会自动禁用全局下拉刷新和弹跳效果。
• 测试需在真实iOS设备上进行，模拟器的滚动行为可能与真机存在差异。

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