需求：在彈出蒙層之后尤勋，底部頁面不會(huì)滾動(dòng)，關(guān)閉蒙層恢復(fù)滾動(dòng)時(shí)茵宪，還在原先的位置
-
網(wǎng)上查找的方法：
- 方案：在禁止時(shí)最冰，document不滾動(dòng)，body固定定位+寬度100%稀火，恢復(fù)時(shí)暖哨，document滾動(dòng)，body靜態(tài)定位
- 缺點(diǎn)：允許滾動(dòng)時(shí)憾股，頁面會(huì)自動(dòng)回到頂部
解決方案： 在禁止?jié)L動(dòng)時(shí)鹿蜀，記錄當(dāng)前位置，固定定位時(shí)也定在當(dāng)前位置服球，恢復(fù)時(shí)茴恰，定在當(dāng)前位置
jQuery寫法：
var topPos; //記錄彈出蒙層前，頁面的位置
//禁止?jié)L動(dòng)條滾動(dòng)
function stopScroll() {
topPos = $(document).scrollTop(); //記錄頁面的位置
console.log(topPos);
$('document').css('overflow','hidden'); //隱藏滾動(dòng)條
$('body').css({
'position': 'fixed', //固定定位
'top': -topPos + 'px', //讓底層頁面定位固定在蒙層彈出之前的位置
'width': '100%'
});
}
//允許滾動(dòng)條滾動(dòng)
function openScroll() {
$('document').css('overflow','scroll'); //顯示滾動(dòng)條
$('body').css('position', 'static'); //靜態(tài)定位
$('html,body').scrollTop(topPos); //關(guān)閉蒙層斩熊，讓頁面蒙層彈出之前的位置
console.log($('html,body').scrollTop());
}
- demo
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>彈出遮罩層后往枣，如何禁止底層頁面的滾動(dòng)</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.container {
max-width: 750px;
height: 2000px;
margin: 0 auto;
background-color: teal;
font-size: 32px;
font-weight: bold;
color: #000;
text-align: center;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.showBtn {
position: fixed;
top: 50%;
left: 0;
transform: translateY(-50%);
width: 100px;
height: 50px;
font-size: 20px;
font-weight: bold;
line-height: 50px;
color: #fff;
background-color: cornflowerblue;
text-align: center;
border-radius: 25px;
margin: 30px auto 0;
cursor: pointer;
}
.hideBtn {
width: 100px;
height: 50px;
font-size: 20px;
font-weight: bold;
line-height: 50px;
color: #fff;
background-color: cornflowerblue;
text-align: center;
border-radius: 25px;
margin: 30px auto 0;
cursor: pointer;
}
.mask {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, .6);
z-index: 999;
font-size: 20px;
color: #fff;
font-weight: bold;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
display: none;
}
.bottomp{
font-size: 32px;
font-weight: bold;
color: #000;
text-align: center;
}
</style>
<script src="./jquery.js"></script>
</head>
<body>
<div class="container">
<p>底部頁面</p>
<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>
<p>5</p>
<p>6</p>
<p>7</p>
<p>8</p>
<p>9</p>
<p>10</p>
<p>11</p>
<p>12</p>
<p>13</p>
<p>14</p>
<p>15</p>
<p>16</p>
<p>17</p>
<p>18</p>
<p>19</p>
<p>20</p>
<p>21</p>
<p class="bottomp">底部</p>
<div class="showBtn">顯示蒙層</div>
</div>
<div class="mask">
<p>蒙層</p>
<div class="hideBtn">關(guān)閉蒙層</div>
</div>
</body>
<script>
$('.showBtn').click(function () {
$('.mask').css('display', 'flex');
stopRoll()
})
$('.hideBtn').click(function () {
$('.mask').hide()
openRoll()
})
var topPos;
function openRoll() {
$('document').css('overflow','scroll')
$('body').css('position', 'static');
$('html,body').scrollTop(topPos)
console.log($('html,body').scrollTop());
}
function stopRoll() {
topPos = $(document).scrollTop()
console.log(topPos);
$('document').css('overflow','hidden')
$('body').css({
'position': 'fixed',
'top': -topPos + 'px',
'width': '100%'
});
}
</script>
</html>
