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 // :: * @ ...
随机推荐
- Spring 动态代理时是如何解决循环依赖的?为什么要使用三级缓存?
前言 在研究 『 Spring 是如何解决循环依赖的 』 的时候,了解到 Spring 是借助三级缓存来解决循环依赖的. 同样在上一节留下了疑问: 循环依赖为什么要使用三级缓存?而不是使用二级缓存? ...
- 【译】.NET 5. 0 中 Windows Form 的新特性
自从 Windows Form 在 2018 年底开源并移植到 .NET Core 以来,团队和我们的外部贡献者都在忙于修复旧的漏洞和添加新功能.在这篇文章中,我们将讨论 .NET 5.0 中 Win ...
- nginx、apache比较
Nginx:异步,多个连接(万级别)可以对应一个进程 轻量级,采用 C 进行编写,同样的 web 服务,会占用更少的内存及资源 抗并发,nginx 以 epoll and kqueue 作为开发模型, ...
- React-Router browserHistory浏览器刷新出现页面404解决方案
在React项目中我们经常需要采用React-Router来配置我们的页面路由,React-Router 是建立在 history 之上的,常见的history路由方案有三种形式,分别是: 1.has ...
- centos安装Qt
转:http://blog.csdn.net/wavelee/article/details/7855727 在编译Qt4.8.6版本的库时,在配置时 ./configure 出现了如下的错误: Ba ...
- SignalR入坑笔记
什么是SignalR ASP.NET Core SignalR 是一个开源库,它简化了向应用程序添加实时 web 功能的功能. 实时 Web 功能使服务器端代码能够即时将内容推送到客户端. ASP.N ...
- Snapshot查询所有快照
今天使用snapshot list这个命令时查询出了所有的表,没注意下面报错: NoMethodError:undefined method '-@' for #<Array:0x54326e9 ...
- AtCoder Beginner Contest 179
比赛链接:https://atcoder.jp/contests/abc179/tasks A - Plural Form 题意 给出一个由小写字母组成的单词,如果单词以 $s$ 结尾,在单词的末尾加 ...
- Python实现AES的CBC模式加密和解密过程详解 和 chr() 函数 和 s[a:b:c] 和函数lambda
1.chr()函数 chr() 用一个范围在 range(256)内的(就是0-255)整数作参数,返回一个对应的字符. 2.s[a:b:c] s=(1,2,3,4,5) 1>. s[a]下标访 ...
- HihoCoder - 1055 树形dp
vj链接:https://vjudge.net/contest/367007#problem/G 题意: 给你一棵树,树上有n个节点,每一个节点有一个权值,树根节点是1,你需要找到以1为起点连通的m个 ...