HTML开发 完美解决pop弹出蒙版后底层滑动问题
程序员文章站
2022-05-31 15:57:49
...
html 弹出蒙版后禁止底层滑动
在对应的最外层（蒙版父视图），添加css
position: relative;
蒙版层使用
position: fixed;
然后点击弹出蒙版和关闭蒙版 调用下面的方法
// 处理弹出/关闭pop的时候，使背景图不滚动
fixedBody: function () {
var _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)
}
}
具体代码栗子如下：
<!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="https://cdn.jsdelivr.net/npm/vue/dist/vue.min.js"></script>
<!-- 引入babel-polyfill es6转es5 -->
<script src="https://cdn.bootcss.com/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>
// 设置fontSize
initFontSize()
// 变化的时候，修改fontSize
window.onresize = () => {
initFontSize()
}
function initFontSize() {
var html = document.getElementsByTagName("html")[0];
const cw = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
// 375 -> fontSize = 16px
html.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>
效果如图：