modal 弹框遮罩层,滚动穿透bug 解决方案
modal 弹框遮罩层,滚动穿透bug 解决方案
- 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;
}
- open / close 更新 lock status
modal 弹框遮罩层,滚动穿透bug 解决方案的更多相关文章
- vue 弹框产生的滚动穿透问题
首先定义一个全局样式: .noscroll{ position: fixed; left: 0; top: 0; width: 100%; } 创建一个dom.js文件,定义几个方法: export ...
- html+css源码之实现登录弹出框遮罩层效果
在web开发中,很多网站都做了一些特别炫丽的效果,比如用户登录弹框遮罩层效果,本文章向大家介绍css如何实现登录弹出框遮罩层效果,需要的朋友可以参考一下本文章的源代码. html+css实现登录弹出框 ...
- modal 遮罩层,滚动穿透 bug
modal 遮罩层,滚动 穿透bug float 弹层 taro 小程序弹框 滚动击穿 问题 https://segmentfault.com/q/1010000011134345 solution ...
- 移动端和PC端弹出遮罩层后,页面禁止滚动的解决方法及探究
PC端解决方案 pc端的解决思路就是在弹出遮罩层的时候取消已经存在的滚动条,达到无法滚动的效果. 也就是说给body添加overflow:hidden属性即可,IE6.7下不会生效,需要给html增加 ...
- vue解决遮罩层滚动方法
vue 遮罩层阻止默认滚动事件 在写移动端页面的时候,弹出遮罩层后,我们仍然可以滚动页面. vue中提供 @touchmove.prevent 方法可以完美解决这个问题 <div class=& ...
- jquery特效(7)—弹出遮罩层且内容居中
上周写了几个小特效,其中有个点击按钮弹出遮罩层的特效,下面来看最终实现的效果: 由于是测试的程序,所以我未加关闭的按钮. 一.主体程序 <!DOCTYPE html> <html&g ...
- Css动画形式弹出遮罩层,内容区上下左右居中于不定宽高的容器中
<!DOCTYPE html> <html> <head> </head> <body id="body"> <! ...
- C#使用Windows API实现桌面上的遮罩层(鼠标穿透)
C#使用Windows API实现桌面上的遮罩层(鼠标穿透) C#实现实现桌面上的遮罩层(鼠标穿透)主要通过一下几个API函数来实现:GetWindowLong,SetWindowLong,SetLa ...
- iview modal 弹框 模板
iview modal 弹框 模板 <!-- * @description 上传图片 * @fileName camera.vue * @author 彭成刚 * @date // :: * @ ...
随机推荐
- How to kill go routine?
How to kill go routine? https://stackoverflow.com/questions/37997608/kill-a-method-in-an-infinite-lo ...
- 配置CLion管理Qt项目国际化支持
随着Qt 6的发布,cmake也正式宣告接管qmake的工作了. 在之前的一篇博客里我介绍了如何使用cmake管理你的qt项目,不过有一点我没有讲,那就是对国际化(i18n)的处理. 今天我们就来介绍 ...
- ping、telnet
ping用来检查网络是否通畅或者网络连接速度的命令 telnet是用来探测指定ip是否开放指定端口 Telnet 一 .关于telnet 对于Telnet的认识,不同的人持有不同的观点,可以把Teln ...
- MySQL按照(windows)及常用命令
MySQL语法规则 关键字与函数名称全部大写 数据库名称.表名称.字段名称全部小写 SQL 语句必须以分号结尾 MySQL安装 MySQL配置: 在cmd中输入 mysql,提示['mysql' 不是 ...
- 将插件绑定在某个phase执行,推送镜像
文章目录 将插件绑定在某个phase执行 推送镜像 将插件绑定在某个phase执行 需求:在执行mvn clean package 时,插件自动为构建Docker镜像. 实现:将插件的的goal绑定在 ...
- hadoop使用常见问题总结!
1,执行 hdfs dfs -copyFromLocal 命令报错! 19/01/02 11:01:32 INFO hdfs.DFSClient: Exception in createBlockOu ...
- 误删eth1或者 eth0
不小心把机房,eth1删除了,过2天还演示,折腾一下午.... 首先eth1存在地方是2块./etc/sysconfig/network-scripts/下 /et/sysconfig/network ...
- 2.DHCP的基本概念
1.DHCP典型组网 DHCP组网中,包括以下三种角色: DHCP服务器 DHCP服务器负责从地址池中选择IP地址分配至DHCP客户端,还可以为DHCP客户端提供其他网络参数,如默认网关地址.DNS服 ...
- ThreadLocal全面解析,一篇带你入门
===================== 大厂面试题: 1.Java中的引用类型有哪几种? 2.每种引用类型的特点是什么? 3.每种引用类型的应用场景是什么? 4.ThreadLocal你了解吗 5 ...
- pandas中的遍历方式速度对比
对一个20667行的xlsx文件进行遍历测试 import pandas as pd # 定义一个计算执行时间的函数作装饰器,传入参数为装饰的函数或方法 def print_execute_time( ...