iOS设备中formContent类div仅支持双指滚动问题求助

我的应用在iOS设备上遇到一个棘手问题：className为formContent的div仅允许通过双指滚动，单指无法正常触发滚动。尝试过相关滚动修复方案但未生效，以下是相关代码：

React组件代码 #

<DialogBackdrop {...props} className={styles.backdrop}>
  <ReakitDialog className={classNames(className, styles.dialog)} {...props}>
    <DialogTitle>
      <CloseDialog handleClose={handleClose} />
      {header}
    </DialogTitle>
    <div className={styles.formContent}>
      <Formik
        initialValues={initialValues}
        onSubmit={handleSubmit}
        validationSchema={validationSchema}
        innerRef={formRef}
        enableReinitialize={true}
      >
        <Form>
          {children}
        </Form>
      </Formik>
    </div>
    {props.variant !== "info" &&
      <DialogActions>
        <DialogFooter
          variant={props.variant}
          onClose={handleClose}
          onSubmit={saveInputs}
          loading={loading}
          submitLabel={submitLabel}
          cancelLabel={cancelLabel} />
      </DialogActions>}
  </ReakitDialog>
</DialogBackdrop>

SCSS样式代码 #

.backdrop {
  
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  z-index: 99999;
  background-color: rgba(tokens.$color-whisper, 0.95);

  @include theme.media-desktop-up {
    overflow-y: scroll;
    grid-template-columns: 40rem;
    display: grid;
    justify-content: center;
    align-items: start;
    padding-inline: tokens.$spacing-xxx-small;
    grid-template-rows: tokens.$spacing-x-large minmax(min-content, auto) tokens.$spacing-xx-large;

    &:before {
      content: '';
      height: tokens.$spacing-xx-large;
    }

    &:after {
      content: '';
      height: tokens.$spacing-x-large;
    }
  }
}

.dialog {
  width: 100%;
  margin-inline: auto;
  background-color: tokens.$color-white;
  position: relative;
  display: flex;
  flex-direction: column;

  @include theme.media-tablet-down {
    height: 100%;
  }

  @include theme.media-desktop-up {
    max-width: 40rem;
    min-height: 307px;
    max-height: 40rem;
    border-radius: tokens.$radius-large;
    box-shadow: 0 20px 60px -20px tokens.$color-silver,
      0 12px 12px -12px tokens.$color-palladium,
      0 0 0 1px tokens.$color-silver;
  }
}

.title {
  background-color: tokens.$color-white;
  margin-block-start: tokens.$spacing-medium;
  margin-block-end: tokens.$spacing-small;
  @include theme.media-desktop-up {
    padding-inline: tokens.$spacing-xx-large;
  }

  @include theme.media-tablet-down {
    padding: tokens.$spacing-small;
  }
}

.formContent {
  flex: 1;
  overflow-y: scroll;

  @include theme.media-desktop-up {
    padding-inline: tokens.$spacing-xx-large;
  }

  @include theme.media-tablet-down {
    padding-inline: tokens.$spacing-small;
  }
}

针对性修复方案 #

针对iOS滚动的特性，给滚动容器添加原生滚动支持并避免手势冲突：

1. 修改formContent样式，添加iOS滚动关键属性：

.formContent {
  flex: 1;
  overflow-y: scroll;
  -webkit-overflow-scrolling: touch; // 启用iOS原生滚动回弹效果
  touch-action: pan-y; // 明确允许垂直滚动，避免手势识别冲突

  @include theme.media-desktop-up {
    padding-inline: tokens.$spacing-xx-large;
  }

  @include theme.media-tablet-down {
    padding-inline: tokens.$spacing-small;
  }
}

2. 调整父容器dialog的移动端样式，避免嵌套滚动上下文干扰：

.dialog {
  width: 100%;
  margin-inline: auto;
  background-color: tokens.$color-white;
  position: relative;
  display: flex;
  flex-direction: column;

  @include theme.media-tablet-down {
    height: 100%;
    overflow: hidden; // 隐藏父容器滚动，确保formContent为唯一滚动区域
  }

  @include theme.media-desktop-up {
    max-width: 40rem;
    min-height: 307px;
    max-height: 40rem;
    border-radius: tokens.$radius-large;
    box-shadow: 0 20px 60px -20px tokens.$color-silver,
      0 12px 12px -12px tokens.$color-palladium,
      0 0 0 1px tokens.$color-silver;
  }
}

3. 可选：禁用桌面端backdrop的滚动在移动端生效
   如果移动端backdrop的overflow-y:scroll被继承导致冲突，可明确在移动端设置：

.backdrop {
  // 原有样式...
  @include theme.media-tablet-down {
    overflow-y: hidden;
  }
}

这些修改通过明确滚动容器的行为、启用iOS原生滚动特性，解决单指滚动失效的问题。

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