React-Modal iOS端弹窗打开时父组件滚动问题求助

我之前在做React项目时也碰到过iOS这个烦人的滚动穿透问题，你的思路方向是对的，但漏掉了关闭弹窗时恢复滚动状态的关键步骤，另外针对iOS的特殊性还要做一些额外处理，下面一步步来解决：

1. 添加上恢复滚动的方法 #

你已经写了disableScroll来禁用滚动，现在需要一个对应的方法来恢复默认状态：

enableScroll = () => {
  // 把body的overflow属性重置为空，回到默认滚动状态
  document.body.style.overflow = '';
}

2. 在弹窗关闭时调用恢复方法 #

React Modal提供了onAfterClose回调，这个是在弹窗完全关闭后触发的，比onRequestClose更稳妥，把它加到Modal组件上：

<Modal 
  isOpen={open} 
  onRequestClose={this.handleCloseModal} 
  style={styles.modal} 
  contentLabel="Example Modal" 
  onAfterOpen={this.disableScroll}
  onAfterClose={this.enableScroll} // 新增关闭后恢复滚动的回调
>
  {/* 弹窗内容 */}
</Modal>

如果你习惯在handleCloseModal里统一处理，也可以把enableScroll放在状态更新的回调里，确保弹窗状态切换完成后再恢复滚动：

handleCloseModal = () => {
  this.setState({ open: false }, () => {
    this.enableScroll();
  });
}

3. 针对iOS的滚动穿透额外处理 #

有时候光设置body.style.overflow = 'hidden'在iOS上还不够，因为系统的触摸滚动优先级很高，这时候需要添加触摸事件监听来阻止默认滚动行为：
补充两个方法完善滚动控制逻辑：

// 阻止touchmove的默认滚动行为
preventTouchMove = (e) => {
  e.preventDefault();
}

disableScroll = () => {
  document.body.style.overflow = 'hidden';
  // 添加touchmove监听，注意设置passive: false才能生效（iOS默认是passive模式）
  document.body.addEventListener('touchmove', this.preventTouchMove, { passive: false });
}

enableScroll = () => {
  document.body.style.overflow = '';
  // 移除监听，避免影响后续页面的正常滚动
  document.body.removeEventListener('touchmove', this.preventTouchMove);
}

4. 优化父组件样式的动态控制 #

你之前给父组件写了固定的overflow: hidden等样式，这会导致父组件平时也无法滚动。建议改成动态添加/移除类的方式，更灵活：
先定义一个CSS类：

.no-scroll {
  overflow: hidden;
  position: absolute;
  width: 100%;
  height: 100%;
}

然后修改滚动控制方法：

disableScroll = () => {
  document.body.classList.add('no-scroll');
  document.body.addEventListener('touchmove', this.preventTouchMove, { passive: false });
}

enableScroll = () => {
  document.body.classList.remove('no-scroll');
  document.body.removeEventListener('touchmove', this.preventTouchMove);
}

这样只有弹窗打开时父组件才会被禁用滚动，平时保持正常的滚动状态。

按照上面的步骤调整后，应该就能解决iOS上弹窗打开时父组件滚动、以及关闭后父组件滚动被禁用的问题了。

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