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