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

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

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;
  width: 0 !important;
  height: 0 !important;
  background: transparent;
}


  1. open / close 更新 lock status

posted @ 2020-04-03 11:57  xgqfrms  阅读(1114)  评论(3编辑  收藏  举报