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. (转载)微软数据挖掘算法:Microsoft 线性回归分析算法（11）

    前言 此篇为微软系列挖掘算法的最后一篇了,完整该篇之后,微软在商业智能这块提供的一系列挖掘算法我们就算总结完成了,在此系列中涵盖了微软在商业智能(BI)模块系统所能提供的所有挖掘算法,当然此框架完全可 ...

  2. python中贪婪与非贪婪

    Python里数量词默认是贪婪的(在少数语言里也可能是默认非贪婪),总是尝试匹配尽可能多的字符: 非贪婪则相反,总是尝试匹配尽可能少的字符. 在"*","?", ...

  3. Dubbo 总结：关于 Dubbo 的重要知识点

    一 重要的概念 1.1 什么是 Dubbo? Apache Dubbo (incubating) |ˈdʌbəʊ| 是一款高性能.轻量级的开源Java RPC 框架,它提供了三大核心能力:面向接口的远 ...

  4. numpy pandas 学习

    一. 数组要比列表效率高很多 numpy高效的处理数据,提供数组的支持,python默认没有数组.pandas.scipy.matplotlib都依赖numpy. pandas主要用于数据挖掘,探索, ...

  5. Java三种IO模型和LinuxIO五种IO模型

    Java: https://github.com/Snailclimb/JavaGuide/blob/master/docs/java/BIO-NIO-AIO.md https://github.co ...

  6. 四：Spring Security 登录使用 JSON 格式数据

    Spring Security 登录使用 JSON 格式数据 1.基本登录方案 1.1 创建 Spring Boot 工程 1.2 添加 Security 配置 2.使用JSON登录 江南一点雨-Sp ...

  7. Html5 部分快捷键

    1:Tab键,快速创建标签 2:ctrl+d,删除光标所在行 3; ctrl+/ 快速添加注释 ctrl+shirt+/ 快速添加多行注释,在js里分别为添加单行注释和多行注释 4; ctrl+alt ...

  8. Jenkins （ jenkins+harbor）

    Harbor 是咱们国产的docke仓库具体详细了解请参考以下连接 https://blog.csdn.net/csdn_duomaomao/article/details/78036331 http ...

  9. orm（Manager isn't accessible via %s instances" % cls.__name）报错

    报错信息 Manager isn't accessible via %s instances" % cls.__name 解决方法 https://www.jianshu.com/p/5e0 ...

  10. （19）ln命令：在文件之间建立链接（硬链接和软链接）

    1.ext 文件系统(Linux 文件系统)是如何工作的. 我们在前面讲解了分区的格式化就是写入文件系统,而 Linux 目前使用的是 ext4 文件系统.如果用一张示意图来描述 ext4 文件系统 ...