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

  1. height 100%/ 100vh

  2. overflow hidden

js ??? stop scroll event





xgqfrms 2012-2020

www.cnblogs.com 发布文章使用:只允许注册用户才可以访问!


modal 遮罩层,滚动穿透 bug的更多相关文章

  1. modal 弹框遮罩层,滚动穿透bug 解决方案

    modal 弹框遮罩层,滚动穿透bug 解决方案 parent component 动态设置 lock css const computedClassName = classNames( 'activ ...

  2. C#使用Windows API实现桌面上的遮罩层(鼠标穿透)

    C#使用Windows API实现桌面上的遮罩层(鼠标穿透) C#实现实现桌面上的遮罩层(鼠标穿透)主要通过一下几个API函数来实现:GetWindowLong,SetWindowLong,SetLa ...

  3. vue解决遮罩层滚动方法

    vue 遮罩层阻止默认滚动事件 在写移动端页面的时候,弹出遮罩层后,我们仍然可以滚动页面. vue中提供 @touchmove.prevent 方法可以完美解决这个问题 <div class=& ...

  4. [bug]小程序弹出层滚动穿透问题修复

    如题,解决方案有两种: 1.如果弹出层没有滚动事件,就直接在蒙板和弹出层上加 catchtouchmove;(方便快捷) <template name="popup-modal&quo ...

  5. IPhone 、Webkit手机浏览器Div滚动、滑动卡,遮罩层被穿透的解决办法

    在滚动条的层上面加上-webkit-overflow-scrolling:touch;样式即可解决!

  6. 小程序iphone蒙层滚动穿透

    如图,这个弹出层在滚动列表的时候,在iPhone上是会穿透导致页面也跟着滚动,所以这时不能用普通的view标签加scroll属性实现,看了下文档发现有专门的scroll-view组件,用该组件替换就可 ...

  7. ant design Modal遮罩层颜色加深 解决方案

    1.原因 页面中存在多个Modal同时渲染及弹出(在table里使用Modal就会出现这种问题) 2.解决方案 不让多个Modal同时渲染就行了,设置Modal的visible属性为this.stat ...

  8. js中奇怪的问题 同步ajax,modal遮罩层

    奇怪问题一 今天有一段js执行的时候出现了问题 $.ajax({ ..., async:false, ... }); $('#myModal').modal('hide'); loadcurrentp ...

  9. 弹层蒙版(mask),ios滚动穿透,我们项目的解决方案

    问题描述 项目开发遇到一个ios独有的问题,在wkwebview中稳定复现 问题: 弹出一个蒙版,当在蒙版上面滑动的时候蒙版后面的内容滚动了 这当然是ios的bug,但是经过我们测试iphone7也会 ...

随机推荐

  1. 丢包 ICMP

    小结: 1.ICMP 常见网络丢包故障分析及处理 云极安 云极安 2019-12-25 我们在管理维护网络的过程中经常会遇到数据包丢失的现象.使用Ping命令进行连通性测试,则会发现Ping包延时远远 ...

  2. Kubernetes (yaml 文件详解)

    # yaml格式的pod定义文件完整内容:apiVersion: v1       #必选,版本号,例如v1kind: Pod       #必选,Podmetadata:       #必选,元数据 ...

  3. 我用了半年的时间,把python学到了能出书的程度

    Python难学吗?不难,我边做项目边学,过了半年就通过了出版社编辑的面试,接到了一本Python选题,并成功出版. 有同学会说,你有编程基础外带项目实践机会,所以学得快.这话不假,我之前的基础确实加 ...

  4. CyclicBarrier---可重用的循环栅栏

    很多文章只是提了下可重用,具体这个栅栏怎么可重用的,很多没有说明,这里会解开你的疑惑. CyclicBarrier是一个同步工具类,它允许一组线程互相等待,直到达到某个公共屏障点.与CountDown ...

  5. impala支持的数据库里的double(float)类型,通过迁移inceptor后,类型的值都变成了null

    impala支持的数据库里的double(float)类型,通过迁移inceptor后,double类型的值都变成了null. 通过查阅日志发现默认将double转换成Decimal(38,10)然而 ...

  6. CTGU_训练实录

    前言 之前做题都没有感觉,慢慢出去比赛后,打Codeforces,看别的人博客,知乎上的讨论,慢慢的对算法有一些自己的思考.特写是最近看知乎上别人说的Dijkstra利用水流去理解,LCA的学习,感觉 ...

  7. 2019牛客暑期多校训练营(第一场)E ABBA (DP/卡特兰数)

    传送门 知识点:卡特兰数/动态规划 法一:动态规划 由题意易知字符串的任何一个前缀都满足\(cnt(A) - cnt(B) \le n , cnt(B)-cnt(A)\le m\) \(d[i][j] ...

  8. AtCoder Beginner Contest 179

    比赛链接:https://atcoder.jp/contests/abc179/tasks A - Plural Form 题意 给出一个由小写字母组成的单词,如果单词以 $s$ 结尾,在单词的末尾加 ...

  9. easyx学习心得

    前几天算法课的实验要求实现可视化,搞了半天没动咋实现,然后有大佬说用easyx,,,我寻思着也没教这玩意咋用啊.然后很烦躁的上网找教程,发现没有教怎么使用的,都说有一本说明书(链接),自己调用函数就可 ...

  10. P3381 [模板] 最小费用最大流

    EK  + dijkstra (2246ms) 开氧气(586ms) dijkstra的势 可以处理负权 https://www.luogu.org/blog/28007/solution-p3381 ...