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


solution
disable scroll event

handleTouchScroll = (flag = `true`) => {
log(`touch scroll`)
// if (ENV !== Taro.ENV_TYPE.WEB) {
// return
// }
document.body.addEventListener(`scroll`, () => {
log(`no scroll event`)
});
let scrollTop = 0;
if (flag) {
scrollTop = document.documentElement.scrollTop
// 使body脱离文档流
document.body.classList.add('at-frozen')
// 把脱离文档流的body拉上去!否则页面会回到顶部!
document.body.style.top = `${-scrollTop}px`
} else {
document.body.style.top = null
document.body.classList.remove('at-frozen')
document.documentElement.scrollTop = scrollTop
}
}
modal OK
弹框, 无穿透问题
https://taro-ui.jd.com/#/docs/modal
https://github.com/NervJS/taro-ui/tree/dev/src/components/modal


toast
https://taro-ui.jd.com/#/docs/toast
css style
OK
height 100%/ 100vh
overflow hidden

js ??? stop scroll event
xgqfrms 2012-2020
www.cnblogs.com 发布文章使用:只允许注册用户才可以访问!
modal 遮罩层,滚动穿透 bug的更多相关文章
- modal 弹框遮罩层,滚动穿透bug 解决方案
modal 弹框遮罩层,滚动穿透bug 解决方案 parent component 动态设置 lock css const computedClassName = classNames( 'activ ...
- C#使用Windows API实现桌面上的遮罩层(鼠标穿透)
C#使用Windows API实现桌面上的遮罩层(鼠标穿透) C#实现实现桌面上的遮罩层(鼠标穿透)主要通过一下几个API函数来实现:GetWindowLong,SetWindowLong,SetLa ...
- vue解决遮罩层滚动方法
vue 遮罩层阻止默认滚动事件 在写移动端页面的时候,弹出遮罩层后,我们仍然可以滚动页面. vue中提供 @touchmove.prevent 方法可以完美解决这个问题 <div class=& ...
- [bug]小程序弹出层滚动穿透问题修复
如题,解决方案有两种: 1.如果弹出层没有滚动事件,就直接在蒙板和弹出层上加 catchtouchmove;(方便快捷) <template name="popup-modal&quo ...
- IPhone 、Webkit手机浏览器Div滚动、滑动卡,遮罩层被穿透的解决办法
在滚动条的层上面加上-webkit-overflow-scrolling:touch;样式即可解决!
- 小程序iphone蒙层滚动穿透
如图,这个弹出层在滚动列表的时候,在iPhone上是会穿透导致页面也跟着滚动,所以这时不能用普通的view标签加scroll属性实现,看了下文档发现有专门的scroll-view组件,用该组件替换就可 ...
- ant design Modal遮罩层颜色加深 解决方案
1.原因 页面中存在多个Modal同时渲染及弹出(在table里使用Modal就会出现这种问题) 2.解决方案 不让多个Modal同时渲染就行了,设置Modal的visible属性为this.stat ...
- js中奇怪的问题 同步ajax,modal遮罩层
奇怪问题一 今天有一段js执行的时候出现了问题 $.ajax({ ..., async:false, ... }); $('#myModal').modal('hide'); loadcurrentp ...
- 弹层蒙版(mask),ios滚动穿透,我们项目的解决方案
问题描述 项目开发遇到一个ios独有的问题,在wkwebview中稳定复现 问题: 弹出一个蒙版,当在蒙版上面滑动的时候蒙版后面的内容滚动了 这当然是ios的bug,但是经过我们测试iphone7也会 ...
随机推荐
- Trie 前缀树或字典树 确定有限状态自动机
https://zh.wikipedia.org/wiki/Trie 应用 trie树常用于搜索提示.如当输入一个网址,可以自动搜索出可能的选择.当没有完全匹配的搜索结果,可以返回前缀最相似的可能.[ ...
- scala/java等其他语言从CSV文件中读取数据,使用逗号','分割可能会出现的问题
众所周知,csv文件默认以逗号","分割数据,那么在scala命令行里查询的数据: 可以看见,字段里就包含了逗号",",那接下来切割的时候,这本应该作为一个整体 ...
- 题解 CF620E 【New Year Tree】
有关dfs序的例题,需要有一定的位运算基础 题面 给定一个树,树上有颜色,将某一子树的颜色统一修改,求子树中颜色的数量 Solution 子树修改,子树求和,dfs序的知识(类似区间修改区间求和) 考 ...
- 关闭Linux - centos7的防火墙
关闭Centos7的防火墙 在每台虚拟机上分别执行以下指令: systemctl stop firewalld.service #停止firewall systemctl disable firewa ...
- 终于有人把Elasticsearch原理讲透了!学习的第一篇总览全局
诗词大会引出的话题 随着央视诗词大会的热播,小史开始对诗词感兴趣,最喜欢的就是飞花令的环节. 但是由于小史很久没有背过诗词了,飞一个字很难说出一句,很多之前很熟悉的诗句也想不起来. 倒排索引 吕老师: ...
- B - 规律题2
10 123456 1:f(y)=1+2+3+4+5+6=21 2:f(y)=3 3 3 b进制,<b; 10 123 1+2+3=6;是3的倍数 1234 =(999)*1+99 ...
- CF 1326 D. Prefix-Suffix Palindrome
D. Prefix-Suffix Palindrome 题意 给一个字符串 s,求一个字符串 t,t 由 s 的某个前缀以及某个后缀拼接而成,且 t 是回文串,长度不能超过 s.输出最长的 t 分析 ...
- BZOJ1150 [CTSC2007]数据备份Backup 链表+小根堆
BZOJ1150 [CTSC2007]数据备份Backup 题意: 给定一个长度为\(n\)的数组,要求选\(k\)个数且两两不相邻,问最小值是多少 题解: 做一个小根堆,把所有值放进去,当选择一个值 ...
- 牛客网暑期ACM多校训练营(第二场)carpet
传送门:carpet 题意 有一个n*m的地毯,aij表示地毯每格的元素,bij表示地毯每格的价格,要求选取一块价格最大值最小的地毯,并且这块地毯无限铺开之后,原地毯是其子矩阵. 题解 先找到这个矩阵 ...
- P1435 回文字串(DP)
题目描述 回文词是一种对称的字符串.任意给定一个字符串,通过插入若干字符,都可以变成回文词.此题的任务是,求出将给定字符串变成回文词所需要插入的最少字符数. 比如 "Ab3bd"插 ...