#序言

項目中經常會遇到在一個彈窗內實現區域滾動(比如查看我的領取記錄等)，原本以為很好實現，確實也很好實現，但實現的時候再手機端除夕拿了各種各樣的問題。所以總結一下方便后人，也歡迎大神指點！！！

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不行，歡迎大神們的指導