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


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM