vue 弹窗禁止底层滚动
原因:底层视图高度超出百分百,加入弹窗后再苹果浏览器隐藏上下栏的情况下遮罩层没有完全遮住底层。
处理:打开弹窗后禁止底层滚动调用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 弹窗禁止底层滚动的更多相关文章
- 移动端vue页面禁止移动/滚动
当需要在移动端中禁止页面滚动,加入:@touchmove.prevent即可,例子如下 <template> <div @touchmove.prevent> <h3 c ...
- vue+betterscrool实现横向弹性滚动
如何利用better-scroll在vue中实现横向滚动,并且滚动到两端以后会有弹性效果 1.使用npm下载better-scroll 2.按需引入better-scroll 3.需要2个盒子装起来组 ...
- jquery 禁止滚动条滚动,并且滚动条不消失,页面大小不闪动
一,禁止滚动,滚动条不消失,页面大小不闪动 //禁止滚动条滚动 function unScroll() { var top = $(document).scrollTop(); $(document) ...
- vue弹窗插件实战
vue做移动端经常碰到弹窗的需求, 这里写一个功能简单的vue弹窗 popup.vue <template> <div class="popup-wrapper" ...
- js禁止滚动条滚动,并且滚动条不消失,页面大小不变
//禁止滚动条滚动 function unScroll() { var top = $(document).scrollTop(); $(document).on('scroll.unable',fu ...
- vue插件 vue-seamless-scroll 无缝滚动插件ES6使用总结
最近因为需求需要写一个项目信息无缝向上滚动组件,在网上搜了一下,看到大家的一致好评就果断的使用了vue-seamless-scroll组件.下面就简单的介绍它的使用,具体详细的使用推荐大家去看下开发者 ...
- 原生js禁止页面滚动
// 开启.禁止页面滚动 bodyScroll: { e(e) { e.preventDefault();// 注意此处代码片段必须这样提出来已保证传入下边两个事件的处理程序一样才生效,分别写到事件处 ...
- vue弹窗后如何禁止滚动条滚动?
原文地址 常见场景 在许多填写表单的页面中,都会弹出一个选择器,让你在弹窗中选择项目.有时,弹窗本身容纳不下内容,需要让它不断滚动来展示,但因为事件是冒泡的,有时就会造成底部(body 的Z-inde ...
- 自己动手丰衣足食,h5手机端jquery弹窗插件(事件冒泡、单例模式、遮盖部分禁止默认滚动)
感谢浏览,欢迎交流=.= 公司开发微信网页多处需要使用弹窗,使用jquery-ui的定制化下载仍需要150多kb,想来有些奢侈(最终下来只有11kb,压缩后2kb,啊,我的神), 手机端弹窗方式与pc ...
随机推荐
- codeforces 1042D - Petya and Array【树状数组+离散化】
题目:戳这里 题意:有n个数,问有多少个区间满足[L,R]内的和小于t. 解题思路: [L,R]内的和小于t等价于sum[R]-sum[L-1]<t,将sum[L-1]左移,可以看出R与L的关系 ...
- CPU饥饿与线程饥饿
线程饥饿: 进程无法得到资源,(cpu或者io资源或者别的什么资源),所以无法进行下去 比如说读者写者问题,如果读者优先,那么写者可能会饿死. 又比如操作系统概念的一道习题. 用broadcast可能 ...
- TCP之“3次握手,4次挥手”问题——实例分析
上一篇我们分析了三次握手和四次握手的过程,但是理论分析难免枯燥难懂,下面这篇我们来看一个例子,就能更好地理解tcp链接了. 我们可以通过网络抓包的查看具体的流程: 比如我们服务器开启9502的端口.使 ...
- Java中的变量之成员变量、本地变量与类变量
Java中的变量: 1.成员变量(实例变量,属性) 2.本地变量(局部变量) 3.类变量(静态属性) 一.成员变量(实例变量,属性) 1.1-成员变量:(在类中定义, 访问修饰符 修饰符 ...
- sql-libs(1) -字符型注入
关于sql-libs的安装就不做过多的说明, 环境:win7虚拟机 192.168.48.130(NAT连接),然后用我的win10物理机去访问. 直接加 ' 报错,后测试 and '1'='1 成功 ...
- element-ui select get selected option object
element-ui select get selected option object value-key="value" === String :value="{va ...
- <U+200B> for, Zero Width Space ❌
<U+200B> for, Zero Width Space zsh, bash https://www.cnblogs.com/xgqfrms/p/14233264.html#47944 ...
- vscode & javascript & react & "editor.foldingStrategy": "indentation"
vscode & javascript & react & "editor.foldingStrategy": "indentation" ...
- 析构函数 & 构造函数
析构函数 & 构造函数 C++ 析构函数(destructor) 与构造函数相反,当对象结束其生命周期,如对象所在的函数已调用完毕时,系统自动执行析构函数. 析构函数往往用来做"清理 ...
- how to config custom process.env in node.js
how to config custom process.env in node.js process.env APP_ENV NODE_ENV https://nodejs.org/api/proc ...