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. muduo 网络库的整体架构图和一个简化版本的架构设计

    https://blog.csdn.net/adkada1/article/details/54342275 简析 https://blog.csdn.net/amoscykl/article/det ...

  2. 内存屏障 WriteBarrier 垃圾回收 屏障技术

    https://baike.baidu.com/item/内存屏障 内存屏障,也称内存栅栏,内存栅障,屏障指令等, 是一类同步屏障指令,是CPU或编译器在对内存随机访问的操作中的一个同步点,使得此点之 ...

  3. Java 常见关键字总结：final、static、this、super!

    final,static,this,super 关键字总结 final 关键字 final关键字,意思是最终的.不可修改的,最见不得变化 ,用来修饰类.方法和变量,具有以下特点: final修饰的类不 ...

  4. 单体架构、SOA架构、微服务架构

  5. 获取java栈异常

    package com.loan.modules.extbiz.in.rabbitmq.util; import java.io.PrintWriter; import java.io.StringW ...

  6. JVM探究——转载

    JVM探究 请你谈谈你对JVM的理解 Java8虚拟机和之前的变化更新 什么式OOM,什么是栈溢出StackOverFlowError?怎么分析 JVM的常用调优参数有哪些? 内存快照如何抓取,怎么分 ...

  7. Linux下统计CPU核心数量

    首先第一步,cat /proc/cpuinfo processor : 0 vendor_id : GenuineIntel cpu family : 6 model : 45 model name ...

  8. 【疯狂挖坑】linux服务器尝试中的问题（nohup等）

    实验环境:Ubuntu 16.0.4 首当其冲: 1. nohup使用及究极重要事项 我们用服务器肯定都是想在服务器存点什么.让服务器帮我们干点什么,这时候就需要nohup(no hang up)提供 ...

  9. 小白的经典CNN复现（三）：AlexNet

    小白的经典CNN复现(三):AlexNet 锵锵--本系列的第三弹AlexNet终于是来啦(≧∀≦),到了这里,我们的CNN的结构就基本上和现在我们经常使用或者接触的一些基本结构差不多了,并且从这一个 ...

  10. 基于线段树的RMQ

    RMQ(Range Minimum/Maximum Query)区间最值查询,即给出长度为n的数组A,以及m组询问s.t(s<=t<=n),返回区间[s,t]中的最值. 基于线段树的方法实 ...