#序言

项目中经常会遇到在一个弹窗内实现区域滚动(比如查看我的领取记录等)，原本以为很好实现，确实也很好实现，但实现的时候再手机端除夕拿了各种各样的问题。所以总结一下方便后人，也欢迎大神指点！！！

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不行，欢迎大神们的指导