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 // :: * @ ...
随机推荐
- 查看窗口名 调用dll setForegroundWindow
package main import ( "fmt" "log" "syscall" "unsafe" ) var ( ...
- HDU2222 Keywords Search__AC自动机
Keywords Search Time Limit: 1000MS Memory Limit: 131072KB 64bit IO Format: %I64d & %I64u Sub ...
- XCTF-easydex
前期工作 查壳,无.安装打开黑屏. 逆向分析 用jadx打开看看 什么都没有,但可以看一下AndroidManifest 可以看到这个是个纯C/C++写的,没有Java代码,是个NativeActiv ...
- Java通过openOffice实现word,excel,ppt转成pdf实现在线预览
Java通过openOffice实现word,excel,ppt转成pdf实现在线预览 一.OpenOffice 1.1 下载地址 1.2 JodConverter 1.3 新建实体类PDFDemo ...
- Java8 ,LocalDate,LocalDateTime处理日期和时间工具类,
Java8 ,LocalDate,LocalDateTime处理日期和时间工具类 1.获取今天的日期 2.在Java 8 中获取年.月.日信息 3.在Java 8 中处理特定日期 4.在Java 8 ...
- Linux环境mysql快速备份及迁移
在项目实施的过程中,经常会面临数据库迁移,导出和导出数据,如果用普通的mysql客户端备份,时间较长且容易出错.那么mysql快速备份及迁移,就成为数据库迁移的重中之重. 下面介绍我在项目实现过程中用 ...
- swap交换2变量
#define swap(x,y) {(x)=(x)+(y); (y)=(x)-(y); (x)=(x)-(y);} void swap(int i, int offset){ int temp; t ...
- UML——RUP(Rational Unified Process)
一.宏观导图 二.论细节 RUP(Rational Unified Process)统一软件过程,是指要达到一个指定的目标而采取的一些系列有序的步骤,其目的是高效.准时地提交一个满足业务需求的软件产品 ...
- 使用汇编语言实现memcpy
把内核放入内存,究竟需做什么 写满实现内核功能的代码的文件会被编译成一个ELF文件.这个ELF文件不同于LOADER BIN文件.后者实质是一个没有使用DOS命令的COM文件.因此,只需将它原封不动地 ...
- Snapshot查询所有快照
今天使用snapshot list这个命令时查询出了所有的表,没注意下面报错: NoMethodError:undefined method '-@' for #<Array:0x54326e9 ...