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 ...
随机推荐
- 国产smartbits版本-minismb如何测试路由器III
Minismb测试仪表是复刻smartbits的国产版本,是一款专门用于测试智能路由器,网络交换机的性能和稳定性的软硬件相结合的工具.可以通过此工具测试任何ip网络设备的端口吞吐率,带宽,并发连接数和 ...
- Nginx基础 - 常用模块配置
1.Nginx状态监控http_stub_status_module记录Nginx客户端基本访问状态信息 location /mystatus { stub_status on; access_log ...
- eclispe中解决OOM问题
-Xms256M -Xmx512M -XX:PermSize=256m -XX:MaxPermSize=512m
- 容器技术学习系列(一)-Docker基础知识学习
一.概述 1.Docker是什么? 1)Docker是世界领先的软件容器化平台 2)Docker公司开发,开源,托管在github 3)跨平台,支持Windows.MacOS.Linux 2.Dock ...
- 排序算法 以及HKU的一些数据结构 相关题目 以及 K叉树,二叉树 排列
冒泡排序.选择排序.快速排序.插入排序.希尔排序.归并排序.基数排序以及堆排序,桶排序 https://www.cnblogs.com/Glory-D/p/7884525.html https://b ...
- SPOJ LCS Longest Common Substring(后缀自动机)题解
题意: 求两个串的最大\(LCS\). 思路: 把第一个串建后缀自动机,第二个串跑后缀自动机,如果一个节点失配了,那么往父节点跑,期间更新答案即可. 代码: #include<set> # ...
- MD5强碰撞
关卡一 md5弱比较,为0e开头的会被识别为科学记数法,结果均为0 payload param1=QNKCDZO¶m2=aabg7XSs 关卡二 md5 ...
- 在线打开,浏览PDF文件的各种方式及各种pdf插件------(MS OneDrive/google drive & google doc/ github ?raw=true)
在线打开,浏览PDF文件的各种方式: 1 Google drive&doc (国内不好使,you know GFW=Great Firewall) 1. google drive: 直接分 ...
- LeetCode 算法题解 js 版 (001 Two Sum)
LeetCode 算法题解 js 版 (001 Two Sum) 两数之和 https://leetcode.com/problems/two-sum/submissions/ https://lee ...
- 可视化埋点 & XPath
可视化埋点 & XPath https://www.w3.org/TR/xpath-full-text-30/ 数据的准确性 采集时机 数据发送策略 full XPath demo XML & ...