原因:底层视图高度超出百分百,加入弹窗后再苹果浏览器隐藏上下栏的情况下遮罩层没有完全遮住底层。

处理:打开弹窗后禁止底层滚动调用stop事件,关闭则开启底层滚动调用move事件。

let mo=function(e){e.preventDefault();};

stop(){
document.body.style.overflow='hidden';
document.body.style.position='fixed';
document.body.style.width='100%';
document.addEventListener("touchmove",mo,false);//禁止页面滑动
},
move(){
document.body.style.overflow='';//出现滚动条
document.body.style.position='initial';
document.body.style.height='1006px';
document.removeEventListener("touchmove",mo,false);
},

参考相关来源:

https://www.cnblogs.com/fanbi/p/9648184.html

https://blog.csdn.net/m0_37852904/article/details/79300719

vue 弹窗禁止底层滚动的更多相关文章

  1. 移动端vue页面禁止移动/滚动

    当需要在移动端中禁止页面滚动,加入:@touchmove.prevent即可,例子如下 <template> <div @touchmove.prevent> <h3 c ...

  2. vue+betterscrool实现横向弹性滚动

    如何利用better-scroll在vue中实现横向滚动,并且滚动到两端以后会有弹性效果 1.使用npm下载better-scroll 2.按需引入better-scroll 3.需要2个盒子装起来组 ...

  3. jquery 禁止滚动条滚动,并且滚动条不消失,页面大小不闪动

    一,禁止滚动,滚动条不消失,页面大小不闪动 //禁止滚动条滚动 function unScroll() { var top = $(document).scrollTop(); $(document) ...

  4. vue弹窗插件实战

    vue做移动端经常碰到弹窗的需求, 这里写一个功能简单的vue弹窗 popup.vue <template> <div class="popup-wrapper" ...

  5. js禁止滚动条滚动,并且滚动条不消失,页面大小不变

    //禁止滚动条滚动 function unScroll() { var top = $(document).scrollTop(); $(document).on('scroll.unable',fu ...

  6. vue插件 vue-seamless-scroll 无缝滚动插件ES6使用总结

    最近因为需求需要写一个项目信息无缝向上滚动组件,在网上搜了一下,看到大家的一致好评就果断的使用了vue-seamless-scroll组件.下面就简单的介绍它的使用,具体详细的使用推荐大家去看下开发者 ...

  7. 原生js禁止页面滚动

    // 开启.禁止页面滚动 bodyScroll: { e(e) { e.preventDefault();// 注意此处代码片段必须这样提出来已保证传入下边两个事件的处理程序一样才生效,分别写到事件处 ...

  8. vue弹窗后如何禁止滚动条滚动?

    原文地址 常见场景 在许多填写表单的页面中,都会弹出一个选择器,让你在弹窗中选择项目.有时,弹窗本身容纳不下内容,需要让它不断滚动来展示,但因为事件是冒泡的,有时就会造成底部(body 的Z-inde ...

  9. 自己动手丰衣足食,h5手机端jquery弹窗插件(事件冒泡、单例模式、遮盖部分禁止默认滚动)

    感谢浏览,欢迎交流=.= 公司开发微信网页多处需要使用弹窗,使用jquery-ui的定制化下载仍需要150多kb,想来有些奢侈(最终下来只有11kb,压缩后2kb,啊,我的神), 手机端弹窗方式与pc ...

随机推荐

  1. 交换机上禁止某个MAC地址通信

    当分析出网络中某台机器中毒时而有不知道它的具体位置,我们可以通过获取其MAC地址然后在交换机上禁止其MAC来达到隔离它的效果.通过ARP表查询IP地址对应的MAC地址,再将该MAC地址加入黑名单过滤. ...

  2. 牛客网多校第7场 J Sudoku Subrectangles 【构造】

    题目:戳这里 题意:给一个n*m的矩阵,里面由a~z及A~Z构成,问有多少个子矩阵满足任意一行或一列中都没有相同的字母. 解题思路:左上角和右下角两点可以确定一个矩阵.可以先预处理出来每个点作为一个矩 ...

  3. 2019牛客多校第六场H Pair(数位DP 多个数相关)题解

    题意: 传送门 给你\(A,B,C\),要求你给出有多少对\((x, y)\)满足\(x\in [1,A],y\in [1,B]\),且满足以下任意一个条件:\(x \& y > C\) ...

  4. WebSocket All In One

    WebSocket All In One WebSocket heartbeat WebSocket 心跳检测 ping pong refs xgqfrms 2012-2020 www.cnblogs ...

  5. LeetCode 高效刷题路径

    LeetCode 高效刷题路径 Hot 100 https://leetcode.com/problemset/hot-100/ https://leetcode-cn.com/problemset/ ...

  6. React LifeCycle API

    React LifeCycle API old API & new API 不可以混用 demo https://codesandbox.io/s/react-parent-child-lif ...

  7. front-end & web & best code editor

    front-end & web & best code editor 2019 VS Code https://designrevision.com/best-code-editor/ ...

  8. VAST重磅出击,NGK网络搜索量超越ETH!

    Wechat指数中,NGK超越ETH,NGK搜索指数是157648点位,单日环比上涨11.95%,ETH搜索指数是115604点位,就连区块链标杆的BTC也仅仅只有171669点位,我们可清楚的看到N ...

  9. 21_MySQL表外连接实战

    -- 查询每名员工的编号.姓名.部门.月薪.工资等级.工龄.上司编号.上司姓名.上司部门? SELECT e.empno,#员工编号 e.ename,#员工姓名 e.deptno,#员工部门 e.sa ...

  10. 进阶高阶IoT架构-教你如何简单实现一个消息队列

    前言 消息队列是软件系统领域用来实现系统间通信最广泛的中间件.基于消息队列的方式是指由应用中的某个系统负责发送消息,由关心这条消息的相关系统负责接收消息,并在收到消息后进行各自系统内的业务处理.消息可 ...