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. shiro的授权与认证

    shiro的授权与认证 package com.cy.pj.common.aspect;import java.lang.reflect.Method;import java.util.Arrays; ...

  2. spring boot 启动 开启注解 加载 bean

    业务描述:创建一个cache类然后交给spring 管理. @Component @Scope("singleton") public class Cache { public C ...

  3. Java面试(解答题二)

    1.一个用户具有多个角色,请查询出该表中具有该用户的所有角色的其他用户.备注:用户表:tb,角色字段为role,主键为id.请写出sql语句. 解答: 2.概述MVC体系结构 解答: MVC包括三类对 ...

  4. Lambda 表达式 学习

    最近几天在学习Lambda,给我的理解就是一个匿名函数的升级版,代码极大可能的简洁了很多,不需要像以前一样必须使用众多的代码才能实现相关功能. 慢慢积累学习,将Java 8的相关知识进行一个学习. 用 ...

  5. jvm系列三垃圾回收

    三.垃圾回收 1.如何判断对象可以回收 引用计数法 弊端:循环引用时,两个对象的计数都为1,导致两个对象都无法被释放 可达性分析算法 JVM中的垃圾回收器通过可达性分析来探索所有存活的对象 扫描堆中的 ...

  6. Codeforces Round #650 (Div. 3) C. Social Distance

    题目链接:https://codeforces.com/contest/1367/problem/C 题意 给出一个长为 $n$ 的 $01$字符串,两个相邻 $1$ 间距应大于 $k$,初始序列合法 ...

  7. 【bzoj 3232】圈地游戏(算法效率--01分数规划+图论--最小割)

    题目:DZY家的后院有一块地,由N行M列的方格组成,格子内种的菜有一定的价值,并且每一条单位长度的格线有一定的费用.DZY喜欢在地里散步.他总是从任意一个格点出发,沿着格线行走直到回到出发点,且在行走 ...

  8. 【uva 11054】Wine trading in Gergovia(算法效率--等价转换)

    题意:N个等距村庄,买(>0)卖(<0)酒,供需平衡,运K则需K劳动力.问所需的最小劳动力. 解法:由于运出或运入1的都需经过2,所以无论如何,都可以等价于从2本身运入或运出.因此可以将1 ...

  9. hdu517 Triple

    Time Limit: 12000/6000 MS (Java/Others)    Memory Limit: 65536/65536 K (Java/Others) Total Submissio ...

  10. hdu5371 Hotaru's problem

    Time Limit: 4000/2000 MS (Java/Others)    Memory Limit: 65536/65536 K (Java/Others) Total Submission ...