xgqfrms™, xgqfrms® : xgqfrms's offical website of GitHub!

modal 弹框遮罩层，滚动穿透bug 解决方案

1. parent component 动态设置 lock css

  const computedClassName = classNames(
    'activity-detail',
    {
      // 'activity-detail-scroll-lock': true,
      'activity-detail-scroll-lock': isLock,
    },
  );

<View className={computedClassName} onTouchMove={this.stopScrollEvent}>
  {
    isOpened && <StickyModal
      className="xxx"
      isOpened={isOpened}
      onClose={this.handleCloseModal}>
      <TicketWrapper
        groups={groups}
        length={length}
        tickets={tickets}
        onClickGetPrice={this.onClickGetPrice}
      />
    </StickyModal>
  }
</View>

.activity-detail-scroll-lock{
  height: 85vh;
  overflow: hidden;
}

.activity-detail-scroll-lock::-webkit-scrollbar {
  display: none;
  visibility: hidden;
   0 !important;
  height: 0 !important;
  background: transparent;
}

2. open / close 更新 lock status

---