您的位置：首页 > 移动开发

移动端web页面蒙层滚动时页面主体内容不随之滚动的实现方法

2017-03-29 10:49 746 查看

在做移动端web时，遇到一个需求：页面主体内容上有蒙层，蒙层中有个滚动区域，要实现蒙层滚动区域滚动时页面主体内容不随之滚动的效果。

情景1：蒙层为不透明时，蒙层滚动，页面主体内容滚动不滚动看不到，故可以偷懒对其“视而不见”，单独控制蒙层的滚动即可。

情景2：蒙层透明时，页面主体滚动情况可直接看到，不能忽视，需要处理蒙层滚动对页面主体的影响。

以情景2作为目标情景，以下为实验解决过程：

方法一、蒙层fixed定位，蒙层显示时body设置属性overflow:hidden，蒙层中需要滚动的区域设置overflow:auto。当蒙层隐藏时body恢复overflow:auto。

<!doctype html>
<html>
<head>
<meta charset='utf-8'>
<title></title>
<meta name='viewport' content='width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no'>
<style>
html,body,p,div,span,h1,h2,h3,h4,h5,a,img{margin:0;padding:0;}
html,body{
height:100%;
}
#mask{
pos
4000
ition: fixed;
top:0;
left:0;
height:100%;
width:100%;
display:none;
}
#maskBg{
position:absolute;
top:0;
left:0;
height:100%;
width:100%;
background-color:#000;
opacity:0.5;
filter:alpha(opacity=50);
}
#maskWrp{
position: absolute;
width:200px;
height:100%;
left:50%;
top:0;
margin-left:-100px;
overflow-y:auto;
}
#maskCont{
background-color:#f00;

}
p{height:100px;}
</style>
</head>
<body>
<div id='mainCont'>
<p >main1 <span style='color:#f00'>点击页面，蒙层显示</span></p>
<p >main2</p>
<p >main3</p>
<p >main4</p>
<p >main5</p>
<p >main6</p>
<p >main7</p>
<p >main8</p>
<p >main9</p>
<p >main10</p>
</div>
<div id='mask'>
<div id='maskBg'></div>
<div id='maskWrp'>
<div id='maskCont'>
<p >mask1 点击蒙层，蒙层隐藏</p>
<p >mask2</p>
<p >mask3</p>
<p >mask4</p>
<p >mask5</p>
<p >mask6</p>
<p >mask7</p>
<p >mask8</p>
<p >mask9</p>
<p >mask10</p>
</div>
</div>
</div>
<script>
var body=document.body;
var main=document.getElementById('mainCont');
var mask=document.getElementById('mask');
//click #mainCont:mask show
main.addEventListener('click',function(){
mask.style.display='block';
body.style.overflow='hidden';
},false);
//click #mask:mask hide
mask.addEventListener('click',function(){
this.style.display='none';
body.style.overflow='auto';
},false);

</script>
</body>
</html>

方法二、当蒙层显示时，设置body.addEventListener('touchstart',function(e){e.preventDefault();})。该方法会使页面中的overflow:auto/scroll滚动都失效，可以再对蒙层上需要滚动的区域使用touchwipe.js等js手势库来实现滚动。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航