html 弹出蒙版后禁止底层滑动
在对应的最外层（蒙版父视图），添加css
position: relative;
蒙版层使用
position: fixed;
然后点击弹出蒙版和关闭蒙版 调用下面的方法
// 处理弹出/关闭pop的时候，使背景图不滚动fixedBody: function () {var body = document.bodyif (body.style.position != 'fixed') {this.bodyScrollTop = window.scrollYbody.style.position = 'fixed'body.style.top = -this.bodyScrollTop + 'px'} else {body.style.position = ''body.style.top = ''window.scrollTo(0, this.bodyScrollTop)}}
具体代码栗子如下：
<!DOCTYPE html><html lang="en"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><meta name="viewport"content="width=device-width, initial-scale=1.0, maximum-scale=1, minimum-scale=1, user-scalable=0"><title>HTML弹出蒙板的测试</title><!-- 引入 Vue，使用到vue，必须先引入vue --><script src="/npm/vue/dist/vue.min.js"></script><!-- 引入babel-polyfill es6转es5 --><script src="/babel-polyfill/7.8.3/polyfill.min.js"></script><!-- 内部样式 --><style type="text/css">html,body {width: 100%;height: 100%;margin: 0;padding: 0;}.app-view-wrapper {/* 蒙板父视图需要的属性 */position: relative;width: 100%;height: 100%;display: flex;align-items: center;flex-direction: column;}.button-wrapper {display: flex;align-items: center;justify-content: center;width: 120px;margin-top: 30px;height:35px;border-radius:15px;box-shadow:0px 4px 10px 0px rgba(1,55,143,0.3);background-color: rgba(241,98,61,1);margin-bottom: 30px;position: fixed;}.button-title {font-size:14px;color: #FFFFFF;text-align: center;line-height:35px;;}.pop-view-wrapper {/* 蒙板需要的属性 */position: fixed;overflow: hidden;width: 100%; height: 100%;background:rgba(52,52,52,0.7);display: flex;justify-content: center;align-content: center;z-index: 99;left: 0;top: 0;}/* pop背景 */.pop-bg-wrapper {width:300px;display: flex;justify-content: center;align-items: center;flex-direction: column;}.pop-content-wrapper {width: 100%;height:20.625rem; background:#FFFFFF;border-radius:10px;overflow: hidden;display: flex;align-items: center;flex-direction: column;}.content-text {/* height: 10.9375rem; */flex: 1;margin: 20px;font-size:15px;font-weight:400;color:#333333;line-height:25px;margin-bottom: 20px;overflow-y: auto;}.title-text {margin-top: 20px;font-size:18px;font-weight:500;color:#333333;line-height:25px;text-align: center;}.pop-close-img {margin-top: 20px;width: 40px;height: 40px;}</style><!-- 小屏幕处理 --><script>// 设置fontSizeinitFontSize()// 变化的时候，修改fontSizewindow.onresize = () => {initFontSize()}function initFontSize() {var html = document.getElementsByTagName("html")[0];const cw = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;// 375 -> fontSize = 16pxhtml.style.fontSize = cw / 375 * 16 + 'px';}</script></head><body><div id="app" class="app-view-wrapper"><!-- 触发pop按钮 --><div class="button-wrapper" @click="openPop"><div class="button-title">点我弹出pop</div></div><!-- 这里添加内容，让页面可以滚动 --><p v-for="(content, index) in contentList" :key="index">{{content}}</p><!-- 弹出框 --><div class="pop-view-wrapper" v-if="showPop"><div class="pop-bg-wrapper"><div class="pop-content-wrapper"><span class="title-text">pop弹出框</span><div class="content-text">{{popContent}}</div></div><img class="pop-close-img" src="images/close-img.png" alt="" @click="closePop"></div></div></div></body><script>new Vue({el: '#app',data() {return {showPop: false,popContent: '十年前看周星驰大话西游，可以笑的没心没肺，而现在看着看着不知不觉就流泪了，想要救紫霞，就必须要打败牛魔王，想要打败牛魔王，就必须要变成孙悟空，想要变成孙悟空，就必须要忘掉七情六欲，看似简单，难的就是那一转身，正所谓不戴金箍，如何救你，戴了金箍，如何爱你，其实每一个人以前都是那个无忧无虑的至尊宝，只是随着年龄的增长，不得不戴上紧箍咒，拿起金箍棒，成为孙悟空，从而要去承担起所有的责任，再也回不到从前的至尊宝，《大话西游》的结尾有句话，“你看那个人，好奇怪哟，象一条狗”。像条狗的人 是放弃了人间的男女情欢、无欲无念、兢兢业业走在西天取经路上的至尊宝。他如你我这般，收起了脾气火气不再任性淘气，只为梦想奔波。人生百年，谁不曾大闹天宫，谁不曾头上紧箍，谁不曾爱上西楼，谁不曾孤单上路。 曾离我们仅一步之遥的人，一旦错过，之后哪怕化身绝世英雄，身披金衣金甲，脚踏七彩祥云，一跃十万八千里，也未必能追得回来。 三生有幸遇见你，纵使悲凉也是情。 多年以后，才知道，那个转身，有多难…',contentList:['小兄弟可知，为什么自古就有男左女右之说？因为男人的右手杀气太重。','女大三抱金砖，女大三十送江山，女大三百炼仙丹，女大三千列仙班。','青龙偃月刀为何沦为水果刀？九齿钉耙梳出的中分为何如此靓丽？传国玉玺缺的一角竟然是砸核桃所致？何人竟能用13500斤的金箍棒擀饺子皮？张飞为何哭诉自己的蛇矛被抢去织毛衣？京外高压线为何频频发出琴声？敬请关注今晚8点走近科学栏目专题《秀儿，是你吗？》','我要利用核聚变放出的高能粒子流，穿过天文单位级别的距离，精准狙杀数以万计的低等虫族，守卫我所栖息之地的清洁神圣。---简单来说就是晒被子','尚未佩妥剑，转眼便江湖，但愿尽千帆，归来仍少年 ','我要这天,再遮不住我眼.我要这地,再埋不了我心.要这众生,都明白我意.要那诸佛,全都烟消云散.','接受难以接受的事情，或许就是一个人成熟的标志吧','惊不惊喜？意外不意外？感动不感动？','失恋我可以，没钱绝对不行。','话说那赵云白马银枪，力战众将，威武勇猛，在长坂坡上杀了个七进七出，杀得敌人丢兵弃甲，溃不成军。','但那长坂坡也不是省油的灯，她乃是怡红院的头牌花魁，平缓心神之后当即使出坐缸本领，令赵云节节败退...','人在北美，刚下航母。家财不多，挥金如土。麻省毕业，长相彦祖。玉树临风，一米八五。白宫任职，通今博古。刚订完婚，欧洲公主。鹤发童颜，仙风道骨。闲来无事，玩玩知乎。熟人太多，匿了。','北冥有鱼，其名为鲲，鲲之大，一锅炖不下，化而为鸟，其名为鹏，鹏之大，需要两个烧烤架，一个秘制，一个麻辣，来瓶雪花，带你勇闯天涯。']}},// created函数created() {},// 方法methods: {openPop () {this.showPop = true;this.fixedBody();},closePop () {this.showPop = false;this.fixedBody();},fixedBody () {let body = document.body;if (body.style.position != 'fixed') {this.bodyScrollTop = window.scrollY;body.style.position = 'fixed';body.style.top = -this.bodyScrollTop + 'px';} else {body.style.position = '';body.style.top = '';window.scrollTo(0, this.bodyScrollTop);} }}});// 处理移动端的点击双击放大window.onload = function () {// 阻止双击放大var lastTouchEnd = 0;document.addEventListener('touchstart', function (event) {if (event.touches.length > 1) {event.preventDefault();}});document.addEventListener('touchend', function (event) {var now = (new Date()).getTime();if (now - lastTouchEnd <= 300) {event.preventDefault();}lastTouchEnd = now;}, false);// 阻止双指放大document.addEventListener('gesturestart', function (event) {event.preventDefault();});};</script></html>
效果如图：
ps:最近在新公司项目使用的时候，发现代码加上了，依旧是有滚动，找了半天原因，最后发现是缩放问题,下面的代码不能少,特别是<head>里面<meta>标签里maximum-scale=1, minimum-scale=1,完整代码如下：
<meta name="viewport"content="width=device-width, initial-scale=1.0, maximum-scale=1, minimum-scale=1, user-scalable=0">
