#序言
项目中经常会遇到在一个弹窗内实现区域滚动(比如查看我的领取记录等)，原本以为很好实现，确实也很好实现，但实现的时候再手机端除夕拿了各种各样的问题。所以总结一下方便后人，也欢迎大神指点！！！
1.简单介绍
废话不多说，就是一个简单的嵌入到app内的h5抽奖活动页面，在当前页面的弹窗内显示获奖列表，由于列表长度也许会很长，所以弹窗内只能用滚动实现(当然可以重新开一个页面)。废话补多少，直接上代码
2.html部分
<!--领取记录弹窗-->
<div class="promptwing" style="display: none;">
<div class="promptbg">
<div id="wrapper">
<div id="scroller">
<div class="content">
<div class="title">
<span>
中奖时间
</span>
<span>
奖品名称
</span>
</div>
<ul class="lists" id="lists">
<li>
<span>2017.3.11 10:10:10</span><span>头像特效(随机)</span>
</li>
<li>
<span>2017.3.11 10:10:10</span><span>跑车</span>
</li>
<li>
<span>2017.3.11 10:10:10</span><span>南瓜马车</span>
</li>
<li>
<span>2017.3.11 10:10:10</span><span>南瓜马车</span>
</li>
<li>
<span>2017.3.11 10:10:10</span><span>南瓜马车</span>
</li>
<li>
<span>2017.3.11 10:10:10</span><span>南瓜马车</span>
</li>
</ul>
</div>
</div>
</div>
<div class="activebtn activebtnls">
<img src="img/activebtn.png" alt="">
</div>
</div>
</div>
<!--页面整体部分-->
<div class="boxes">
</div>
3.css部分(less)
body{
background: #e11139;
// 我的领奖记录弹窗
.promptwing{
position: fixed;
width:100%;
height:100%;
z-index:9999;
overflow: hidden;
background-color: rgba(0,0,0,0.7);
display: none;
.promptbg{
width:8.8rem;
height:11.376rem;
background: url("../images/promptlistbg.png") no-repeat;
background-size: 100%;
margin:0 auto;
margin-top:1.5rem;
position: relative;
//iscroll滚动列表
#wrapper{
width: 7.904rem;
position: absolute;
top: 3.6rem;
left: 50%!important;
// transform:translate(-50%);
margin-left: -3.952rem;
bottom: 3rem;
overflow-x: hidden;
#scroller{
width: 100%;
box-sizing: border-box;
z-index: 10;
//padding-left: 0.384rem;
//padding-right: 0.384rem;
.content{
width: 100%;
margin: 0 auto;
.title{
width: 100%;
font-size: 0;
span{
display: inline-block;
width: 50%;
line-height: 1rem;
font-size: 0.48rem;
text-align: center;
color: #ffffff;
}
}
.lists{
width: 100%;
font-size: 0;
span{
//display: inline-block;
width: 50%;
float: left;
color: #ffffff;
line-height: 1rem;
font-size: 0.384rem;
}
span:nth-child(1){
text-align: center;
//line-height: 0.6rem;
}
span:nth-child(2){
text-align: left;
padding-left:0.8rem;
box-sizing: border-box;
//line-height:1.2rem;
}
}
}
}
}
.activebtn{
position: absolute;
left: 50%;
// transform:translate(-50%);
margin-left: -2.056rem;
//top:9rem;
width:4.112rem;
height:1.024;
img{
width:100%;
}
}
.activebtnls{
top: 9.44rem;
}
}
}
}
4.js部分
//弹窗消失操作
$('.activebtn').on('click',function () {
$('.promptwing').hide();
$("body,html").css({"overflow":"auto"});
$('.boxes').css("position","static");
})
//查看我的领取记录
$('#listlog').on('click',function () {
$("body,html").css({"overflow":"hidden"});
$('.boxes').css("position","fixed");
$('.promptwing').show();
$("#wrapper").css({"overflow":"auto"});
})
总结
这样就可以实现弹窗里面区域滚动，但是整体不滚动的效果，也不会影响布局.我刚开始js是给body设置的fixed，但是整个页面的布局向做移动，最后给body下一级的父元素.boxes设置就是好的，没想明白为啥给body设置fixed不行，欢迎大神们的指导
