<div class="mask">
<div class="content">我是弹框</div>
</div>
.mask {
position: fixed;
top: 0;
left: 0;
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 100%;
background-color: rgba($color: #333, $alpha: .6); .content {
padding: 20px;
background-color: #fff;
width: 300px;
}
}

当在遮罩上滑动的时候,是会穿透到父节点的,最简单的办法就是阻住默认行为:

document.querySelector(".mask").addEventListener("touchmove", event => {
event.preventDefault();
});

vue中,你可以这么写:

<div class="mask" @touchumove.prevent></div>

如果.content也有滚动条,那么只要阻止遮罩本身就行:

document.querySelector(".mask").addEventListener("touchmove", event => {
if (event.target.classList.contains("mask")) event.preventDefault();
});

或者

<div class="mask" @touchumove.self.prevent></div>

这样,当出现遮罩的时候用户的滑动就会被锁住啦

H5-当你想在出现遮罩的时候,锁住用户的滚动行为,你可以这么做。的更多相关文章

  1. 没有产品,没有用户的,绝对不要浪费时间去联系风投——没有过home run的创业人,想办法先做出产品,找到少量用户,没有任何销售成本

    著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注明出处.作者:Kuan Huang链接:http://www.zhihu.com/question/19641135/answer/1353 ...

  2. ios h5 长按时出现黑色透明遮罩

    html,body{-webkit-text-size-adjust: 100%;-webkit-tap-highlight-color: rgba(0, 0, 0, 0);}

  3. 页面遮罩层,并且阻止页面body滚动。bootstrap模态框原理

    实现思路: 1.需要有一个层将body遮住,放在body上方. 2.修改body的overflow属性值为:hidden 废话不多说了,将关键代码贴出来了,兼容火狐,谷歌,ie 遮罩层的样式代码,红色 ...

  4. 移动端遮罩及阻止页面滑动,实用!!! 我们经常做一个fixed定位的遮罩和一个提示弹框,这时就要用到。记录--

    document.body.style.height = '100%'; document.body.style.overflow = 'hidden'; document.getElementByI ...

  5. js实现页面遮罩层,并且阻止页面body滚动

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  6. EasyPlayer.js H5播放器帮助我这种不会前端的普通用户也能轻松实现直播接入

    说到EasyPlayer.js,先得说一下EasyPlayer到底是啥, An elegant, simple, fast android RTSP/RTMP/HLS/HTTP Player.Easy ...

  7. 如果一个 linux 新手想要知道当前系统支持的所有命令的列表,他需要怎么做?

    使用命令 compgen -c,可以打印出所有支持的命令列表. [root@localhost ~]$ compgen -cl.lllswhichifthen elseelifficaseesacfo ...

  8. H5移动端开发遇见的东西

    常见的有viewport.强制浏览器全屏.IOS的Web APP模式.可点击元素出现阴影 本文主要讲一些其他的或者实用的优化手段. 1. 弹出数字键盘 <!-- 有"#" & ...

  9. Linux用户管理.md

    用户与组的概念 linux多用户,多任务的特性 Linux是一个真实的.完整的多用户多任务操作系统,多用户多任务就是可以在系统上建立多个用户,而多个用户可以在同一时间内登录同一个系统执行各自不同的任务 ...

随机推荐

  1. 20200221--python学习第14天

    今日内容 带参数的装饰器:flash框架+django缓存+写装饰器实现被装饰的函数要执行N次 模块: os sys time datetime和timezone[了解] 内容回顾与补充 1.函数 写 ...

  2. Windows渗透备忘录

    Windows渗透备忘录 mimikatz mimikatz.exe ""privilege::debug"" ""sekurlsa::lo ...

  3. Ubuntu 18.04 MATLAB 安装及配置

    转载请注明出处,谢谢 原创作者:Mingrui 原创链接:https://www.cnblogs.com/MingruiYu/p/12367846.html 本文要点: Ubuntu 18.04 安装 ...

  4. 教你快速使用数据可视化BI软件创建4S店销售数据大屏

    灯果数据可视化BI软件是新一代人工智能数据可视化大屏软件,内置丰富的大屏模板,可视化编辑操作,无需任何经验就可以创建属于你自己的大屏.大家可以在他们的官网下载软件.   本文以4S店销售数据大屏为例为 ...

  5. DotNet 源码学习——QUEUE

    1.Queue声明创建对象.(Queue为泛型对象.) public class Queue<T> :IEnumerable<T>,System.Collections.ICo ...

  6. 聊聊spring之bean对象的实例化过程

    在spring实例化 之前bean对象封装成 beanDefinition 对象 想了解详情的请参考上一篇文章 好了 我们聊聊 Bean 的实例化过程的几个重要角色 BeanDefinitionReg ...

  7. redis之master.slave主从复制

    简介 主机数据更新后根据配置和策略,自动同步到备机的master/slave机制,master以写为主,slave以读为主 从库配置 配置从库,不配主库 配置从库: 格式: slaveof 主库ip ...

  8. linux安装python3环境并配置虚拟环境

    1.安装必要库 yum -y install gcc yum -y install zlib-devel bzip2-devel openssl-devel ncurses-devel sqlite- ...

  9. Quartz.NET - 教程 5: 简单触发器

    译者注: 目录在这 Quartz.NET 3.x 教程 原文在这 Lesson 5: SimpleTrigger 如果你需要在特定的时间点执行一次作业, 或者在特定的时间点执行一次作业, 然后在特定的 ...

  10. lucas定理 模板

    lucas定理 (nm)&VeryThinSpace;mod&VeryThinSpace;p=(⌊np⌋⌊mp⌋)(n&VeryThinSpace;mod&VeryTh ...