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也会 ...
随机推荐
- 不要在nodejs中阻塞event loop
目录 简介 event loop和worker pool event loop和worker pool中的queue 阻塞event loop event loop的时间复杂度 Event Loop中 ...
- Spring Cloud Config、Apollo、Nacos配置中心选型及对比
Spring Cloud Config.Apollo.Nacos配置中心选型及对比 1.Nacos 1.1 Nacos主要提供以下四大功能 2.Spring Cloud Config 3.Apollo ...
- Java——入门“HelloWorld”
//Java程序的结构 //下面这个:外层框架 public class HellloWorld { // Java入口程序框架 //类名与文件名完全一样 public static void mai ...
- Java 8教程(知识内容详细,快速学习Java 8)
允许在接口中有默认方法实现 Lambda表达式 函数式接口 方法和构造函数引用 Lambda的范围 内置函数式接口 Predicates Functions Suppliers Consumers C ...
- centos安装、升级新火狐最新版 31
1.登录火狐主页 下载最新版本firefox-31.0.tar.bz2 解压: tar -jxvf firefox-31.0.tar.bz2 2.然后把旧版本的firefox卸掉 # yum eras ...
- IPSec 专题----转自华为文档
参考链接:https://support.huawei.com/enterprise/zh/doc/EDOC1000122878?section=j004 IPSec 特性全景 1.介绍 由于IP报文 ...
- Latex安装教程(附美赛论文latex模板)
@ 目录 Latex简介 安装步骤 texlive下载 配置环境变量 配置Texsudio latex版本helloworld 美赛 latex模板 Latex简介 LaTeX(LATEX,音译&qu ...
- python里正则表达式基础及注意事项
感觉正则匹配是一件很酷的事,用得好的话可以极大地提高编程效率.虽然在html中BeautifulSoup更好用一些,但有时候还是需要使用正则匹配.所以就此做一些学习和使用过程中的笔记. python有 ...
- dsu on tree ——附带buff的暴力解法
这篇博客只是简单叙述思想(因为ML太弱了),具体例题请转其他博客. dsu on tree,许多OI将其归于启发式合并,当然如果你能理解更好,这只是一个理解方式罢了. 思想简述 顾名思义,这个算法是处 ...
- K - Japan(线段树)
Japan plans to welcome the ACM ICPC World Finals and a lot of roads must be built for the venue. Jap ...