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

  1. parent component 动态设置 lock css

const computedClassName = classNames(
'activity-detail',
{
// 'activity-detail-scroll-lock': true,
'activity-detail-scroll-lock': isLock,
},
); <View className={computedClassName} onTouchMove={this.stopScrollEvent}>
{
isOpened && <StickyModal
className="xxx"
isOpened={isOpened}
onClose={this.handleCloseModal}>
<TicketWrapper
groups={groups}
length={length}
tickets={tickets}
onClickGetPrice={this.onClickGetPrice}
/>
</StickyModal>
}
</View>

.activity-detail-scroll-lock{
height: 85vh;
overflow: hidden;
} .activity-detail-scroll-lock::-webkit-scrollbar {
display: none;
visibility: hidden;
width: 0 !important;
height: 0 !important;
background: transparent;
}
  1. open / close 更新 lock status

modal 弹框遮罩层,滚动穿透bug 解决方案的更多相关文章

  1. vue 弹框产生的滚动穿透问题

    首先定义一个全局样式: .noscroll{ position: fixed; left: 0; top: 0; width: 100%; } 创建一个dom.js文件,定义几个方法: export ...

  2. html+css源码之实现登录弹出框遮罩层效果

    在web开发中,很多网站都做了一些特别炫丽的效果,比如用户登录弹框遮罩层效果,本文章向大家介绍css如何实现登录弹出框遮罩层效果,需要的朋友可以参考一下本文章的源代码. html+css实现登录弹出框 ...

  3. modal 遮罩层,滚动穿透 bug

    modal 遮罩层,滚动 穿透bug float 弹层 taro 小程序弹框 滚动击穿 问题 https://segmentfault.com/q/1010000011134345 solution ...

  4. 移动端和PC端弹出遮罩层后,页面禁止滚动的解决方法及探究

    PC端解决方案 pc端的解决思路就是在弹出遮罩层的时候取消已经存在的滚动条,达到无法滚动的效果. 也就是说给body添加overflow:hidden属性即可,IE6.7下不会生效,需要给html增加 ...

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

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

  6. jquery特效(7)—弹出遮罩层且内容居中

    上周写了几个小特效,其中有个点击按钮弹出遮罩层的特效,下面来看最终实现的效果: 由于是测试的程序,所以我未加关闭的按钮. 一.主体程序 <!DOCTYPE html> <html&g ...

  7. Css动画形式弹出遮罩层,内容区上下左右居中于不定宽高的容器中

    <!DOCTYPE html> <html> <head> </head> <body id="body"> <! ...

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

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

  9. iview modal 弹框 模板

    iview modal 弹框 模板 <!-- * @description 上传图片 * @fileName camera.vue * @author 彭成刚 * @date // :: * @ ...

随机推荐

  1. (010)每日SQL学习:按字母顺序排列字符串

    需求:一串字母'ADFGH',需要按照顺序来显示:A D F G H 第一步:先把字符串拆分 with test as( select 'ADFGH' as a from dual ) select ...

  2. Paginator Django 分页 When QuerySets are evaluated QuerySets 执行原理 QuerySets are lazy 惰性执行 访问db取数据的时机

    https://docs.djangoproject.com/en/2.2/topics/pagination/ Paginator objects¶ The Paginator class has ...

  3. (转载)微软数据挖掘算法:Microsoft 神经网络分析算法原理篇(9)

    前言 本篇文章继续我们的微软挖掘系列算法总结,前几篇文章已经将相关的主要算法做了详细的介绍,我为了展示方便,特地的整理了一个目录提纲篇:大数据时代:深入浅出微软数据挖掘算法总结连载,有兴趣的童鞋可以点 ...

  4. JAXB学习(一):概述

    pre.XML { background-color: rgba(255, 204, 204, 1); padding-left: 25px } JAXB是 Java Architecture for ...

  5. Java并发包源码学习系列:阻塞队列实现之DelayQueue源码解析

    目录 DelayQueue概述 类图及重要字段 Delayed接口 Delayed元素案例 构造器 put take first = null 有什么用 总结 参考阅读 系列传送门: Java并发包源 ...

  6. SpringMVC听课笔记(十三:使用拦截器)

    1.定义一个拦截器: 实现 HandlerInterceptor接口 2. 配置 3.运行流程 4.也可以通过<mvc:mapping>给拦截器设定特定的拦截路径,或者<mvc:ex ...

  7. Spark剖析-宽依赖与窄依赖、基于yarn的两种提交模式、sparkcontext原理剖析

    Spark剖析-宽依赖与窄依赖.基于yarn的两种提交模式.sparkcontext原理剖析 一.宽依赖与窄依赖 二.基于yarn的两种提交模式深度剖析 2.1 Standalne-client 2. ...

  8. java生成xls

    ------------------------------------------------------初始化xls操纵类-------- import java.io.File; import ...

  9. 【洛谷 p3383】模板-线性筛素数(数论)

    题目:给定一个范围N,你需要处理M个某数字是否为质数的询问(每个数字均在范围1-N内).(N<=10000000,M<=100000) 解法:1.欧拉筛O(n),数组近乎100KB:2.( ...

  10. Educational Codeforces Round 94 (Rated for Div. 2) String Similarity、RPG Protagonist、Binary String Reconstruction、Zigzags 思维

    题目链接:String Similarity 题意: 首先题目定义了两个串的相似(串的构成是0.1),如果两个串存在对于一个下标k,它们的值一样,那么这两个串就相似 然后题目给你一个长度为2n-1的串 ...