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. Language Guide (proto3) | proto3 语言指南（七）更新消息类型

    Updating A Message Type - 更新消息类型 如果现有的消息类型不再满足您的所有需要(例如,您希望消息格式有一个额外的字段),但是您仍然希望使用用旧格式创建的代码,不要担心!在不破 ...

  2. Docker私服搭建--Harbor

    Docker私服搭建--Harbor Harbor概述 Harbor的安全机制 Harbor的镜像同步 Harbor的镜像同步机制 Harbor的多级部署 一.安装 1.1 docker安装 1.2 ...

  3. 三：SpringBoot-配置系统全局异常映射处理

    三:SpringBoot-配置系统全局异常映射处理 1.异常分类 1.1 业务异常 1.2 系统异常 2.自定义异常处理 2.1 自定义业务异常类 2.2 自定义异常描述对象 2.3 统一异常处理格式 ...

  4. sourcetree注册

    http://www.cnblogs.com/xiofee/p/sourcetree_pass_initialization_setup.html

  5. php之PDOStatement::execute数组参数带有键值会出错

    当预处理的SQL语句是用问号占位符时,如果是用数组传参的,数组里不要带有键值,否则无法执行SQL. 出错的代码如下: $test = new PDODB(); $param=["d" ...

  6. LA 3641 Leonardo的笔记本 & UVA 11077 排列统计

    LA 3641 Leonardo的笔记本 题目 给出26个大写字母的置换B,问是否存在要给置换A,使得 \(A^2 = B\) 分析 将A分解为几个循环,可以观察经过乘积运算得到\(A^2\)后,循环 ...

  7. Balanced Numbers SPOJ - BALNUM

    代码+注释 1 //我感觉这道题最扯的就是我因为输入而TLE了半天,懵逼死了,想破脑袋也没想到因为输入TLE了半天 2 //题意:求区间内数字满足"奇数各数出现偶数次,偶数各数出现奇数次&q ...

  8. PowerShell随笔8 --- function

    为了脚本逻辑的重复使用,我们更多时候会封装成方法.PowerShell的function和C#.JavaScript的定义有些区别. 我们直接看例子: 可以看到,定义方法并不是这样的: functio ...

  9. requests -- Python

    使用requests方法后,会返回一个response对象,其存储了服务器响应的内容:如下r表示get请求后的响应对象r = requests.get('http://hz.58.com/sale.s ...

  10. WPF 之命令（七）

    一.前言 ​ 事件的作用是发布和传播一些消息,消息送达接收者,事件的使命也就完成了,至于消息响应者如何处理发送来的消息并不做规定,每个接收者可以使用自己的行为来响应事件.即事件不具有约束力. ​ 命令 ...