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也会 ...
随机推荐
- (转载)微软数据挖掘算法:Microsoft 线性回归分析算法(11)
前言 此篇为微软系列挖掘算法的最后一篇了,完整该篇之后,微软在商业智能这块提供的一系列挖掘算法我们就算总结完成了,在此系列中涵盖了微软在商业智能(BI)模块系统所能提供的所有挖掘算法,当然此框架完全可 ...
- C++ Primer Plus读书笔记(六)分支语句和逻辑运算符
1. 以上均包含在cctype中 1 #include<cctype> 2 //#include<ctype.h> 2.文件操作 (1)头文件 1 #include<fs ...
- IntelliJ Idea 解决 Could not autowire. No beans of 'xxxx' type found 的错误提示
IntelliJ Idea 解决 Could not autowire. No beans of 'xxxx' type found 的错误提示哈,在使用 @Autowired 时,今天又遇一坑,这俩 ...
- SpringMVC 通过commons-fileupload实现文件上传
目录 配置 web.xml SpringMVC配置文件 applicationContext.xml 文件上传 Controller 上传实现一 上传实现二 测试 依赖 配置 web.xml < ...
- python实现文件查找功能,excel写入功能
因为要丛UE文档中过滤关键字来统计解码时间,第一次自己完成了一个自动化统计的小工具,用起来颇有成就感. UE文件的内如如下: 需要丛这份关键字中过滤红色标记的两个关键字,取 一个关键字的最后一位,和取 ...
- Java学习路线图()
阶段1 1:学习HTML 2:学习CSS 3:Javascript 4:jquery 5:xml解析 6:Bootstrap 阶段2 7:JAVAse基础 8:mysql数据库 9:Powerdesi ...
- GCD之队列的实现和使用
一.什么是GCD? 以下是摘自苹果的官方说明. Grand Central Dispatch(GCD)是异步执行任务的技术之一.一般将应用程序中记述的线程管理用的代码在系统级中实现.开发者只需要定义想 ...
- Codeforces Round #626 (Div. 2) E. Instant Noodles(二分图,最大公因数)
题意: 给你一个二分图,求左侧端点的所有可能子集中的点相连的右侧端点的权值的和的最大公因数. 题解: 若所有右侧端点均不在同一左侧子集中,则求所有权值的最大公因数即可 . 否则,将在相同左侧子集中的右 ...
- 2019icpc徐州站 Cat 计蒜客 - 42540 && The Answer to the Ultimate Question of Life, The Universe, and Everything. 计蒜客 - 42545
VJ链接:https://vjudge.net/contest/412095#problem/A Cat 计蒜客 - 42540 题意: 给你一个区间[L,R],给你现在拥有的钱S.你需要从[L,R] ...
- KMP浅谈
关于KMP KMP其实是三个人名字的缩写,因为是他们同时发现的(大佬惹不起); KMP作为CSP考点,主要亮点是其优秀的匹配复杂度,而且消耗空间小,比起hash虽然有些局限性,但是因为其正确率 ...