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 @   xgqfrms  阅读(1142)  评论(3编辑  收藏  举报
编辑推荐:
· AI与.NET技术实操系列(二):开始使用ML.NET
· 记一次.NET内存居高不下排查解决与启示
· 探究高空视频全景AR技术的实现原理
· 理解Rust引用及其生命周期标识(上)
· 浏览器原生「磁吸」效果!Anchor Positioning 锚点定位神器解析
阅读排行:
· DeepSeek 开源周回顾「GitHub 热点速览」
· 记一次.NET内存居高不下排查解决与启示
· 物流快递公司核心技术能力-地址解析分单基础技术分享
· .NET 10首个预览版发布:重大改进与新特性概览!
· .NET10 - 预览版1新功能体验(一)
历史上的今天:
2019-04-03 HTML5 & input tel & make a phone call All In One
2019-04-03 Node & CLI & npm publish
2019-04-03 Lighting & CLI
2019-04-03 macOS & zsh & tree All In One
点击右上角即可分享
微信分享提示