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

modal 弹框遮罩层,滚动穿透bug 解决方案的更多相关文章

  1. vue 弹框产生的滚动穿透问题

    首先定义一个全局样式: .noscroll{ position: fixed; left: 0; top: 0; width: 100%; } 创建一个dom.js文件,定义几个方法: export ...

  2. html+css源码之实现登录弹出框遮罩层效果

    在web开发中,很多网站都做了一些特别炫丽的效果,比如用户登录弹框遮罩层效果,本文章向大家介绍css如何实现登录弹出框遮罩层效果,需要的朋友可以参考一下本文章的源代码. html+css实现登录弹出框 ...

  3. modal 遮罩层,滚动穿透 bug

    modal 遮罩层,滚动 穿透bug float 弹层 taro 小程序弹框 滚动击穿 问题 https://segmentfault.com/q/1010000011134345 solution ...

  4. 移动端和PC端弹出遮罩层后,页面禁止滚动的解决方法及探究

    PC端解决方案 pc端的解决思路就是在弹出遮罩层的时候取消已经存在的滚动条,达到无法滚动的效果. 也就是说给body添加overflow:hidden属性即可,IE6.7下不会生效,需要给html增加 ...

  5. vue解决遮罩层滚动方法

    vue 遮罩层阻止默认滚动事件 在写移动端页面的时候,弹出遮罩层后,我们仍然可以滚动页面. vue中提供 @touchmove.prevent 方法可以完美解决这个问题 <div class=& ...

  6. jquery特效(7)—弹出遮罩层且内容居中

    上周写了几个小特效,其中有个点击按钮弹出遮罩层的特效,下面来看最终实现的效果: 由于是测试的程序,所以我未加关闭的按钮. 一.主体程序 <!DOCTYPE html> <html&g ...

  7. Css动画形式弹出遮罩层,内容区上下左右居中于不定宽高的容器中

    <!DOCTYPE html> <html> <head> </head> <body id="body"> <! ...

  8. C#使用Windows API实现桌面上的遮罩层(鼠标穿透)

    C#使用Windows API实现桌面上的遮罩层(鼠标穿透) C#实现实现桌面上的遮罩层(鼠标穿透)主要通过一下几个API函数来实现:GetWindowLong,SetWindowLong,SetLa ...

  9. iview modal 弹框 模板

    iview modal 弹框 模板 <!-- * @description 上传图片 * @fileName camera.vue * @author 彭成刚 * @date // :: * @ ...

随机推荐

  1. list中map 的value值时间排序

    public static void main(String[] args) { String sys=DateUtil.getTime().substring(0,5); System.out.pr ...

  2. 外观模式(Facade) Adapter及Proxy 设计模式之间的关系 flume 云服务商多个sdk的操作 face

    小结: 1. 外观模式/门面模式 Facade  往是多个类或其它程序单元,通过重新组合各类及程序单元,对外提供统一的接口/界面. Proxy(代理)注重在为Client-Subject提供一个访问的 ...

  3. Golang简易版 网站路径扫描demo

    package main import ( "bufio" "fmt" "net/http" "os" "re ...

  4. SpringMVC听课笔记(五:处理模型数据)

    1. Spring MVC 提供了以下几种途径输出数据模型 -- ModelAndView: 处理方法返回值类型为ModelAndView 时,方法体即可通过该对象添加模型数据 -- Map及Mode ...

  5. Language Guide (proto3) | proto3 语言指南(七)更新消息类型

    Updating A Message Type - 更新消息类型 如果现有的消息类型不再满足您的所有需要(例如,您希望消息格式有一个额外的字段),但是您仍然希望使用用旧格式创建的代码,不要担心!在不破 ...

  6. 关于SANGFOR AC记录上网记录

    1.查看加密APP的访问记录,不支持推送证书的方式.也就是这种的是没办法查看到的:2.查看加密网站的访问记录,通过推送证书,电脑可以查看到:手机端安卓的不能,苹果可以,但是不建议做,适用性不好:3.查 ...

  7. Flink-v1.12官方网站翻译-P020-Builtin Watermark Generators

    内置水印生成器 正如在Generating Watermarks一文中所描述的,Flink提供了抽象,允许程序员分配自己的时间戳和发射自己的水印.更具体地说,可以通过实现WatermarkGenera ...

  8. python通过注册表准确获得Windows桌面路径(为了一定的通用性)

    参考文章:https://blog.csdn.net/u013948858/article/details/75072873 使用python内置的winreg模块,非常方便: import winr ...

  9. 让visual studio总是以管理员身份启动

    环境 win10 visual studio 2019 步骤 找到visual studio的安装目录 怎么找? 右击win10开始菜单中visual studio的快捷方式, 依次选择 更多-> ...

  10. 机器学习算法之Kmeans算法(K均值算法)

    Kmeans算法(K均值算法) KMeans算法是典型的基于距离的聚类算法,采用距离作为相似性的评价指标,即认为两个对象的距离越近,其相似度就越大.该算法认为簇是由距离靠近的对象组成的,因此把得到紧凑 ...