移动端遮罩层滚动问题（安卓滚动正常），解决iOS浏览器滚动底部也跟着滚动问题

注意点：

凡是页面脱离文档流（包含position:fixed,position:absolute），执行touchmove事件时，取消冒泡事件，默认事件

========半透明遮罩层，添加touchmove事件

$(".black-shade").on('touchmove',function(e){ console.log(e); e.stopPropagation(); e.preventDefault();//阻止默认事件 })

========遮罩层内容滚动

//获取滚动的高度
let scrollTop = 0;
function getScrollTop() {
    let scroll_top = 0;
    if (document.documentElement && document.documentElement.scrollTop) {
        scroll_top = document.documentElement.scrollTop;
    }else if (document.body) {
        scroll_top = document.body.scrollTop;
    }
    return scroll_top;
}

//赋值滚动的高度
function setScrollTop(scroll_top){
    document.documentElement.scrollTop = scroll_top;
    document.body.scrollTop = scroll_top;
}

// 遮罩层 显示 body隐藏
export function filtrateShow(fixedDiv,bottomDiv,_className){
    let scroll_top = getScrollTop();
    scrollTop = scroll_top;
    fixedDiv.addClass(_className);
    if(scroll_top != 0){
        let top = scroll_top - fixedDiv.height();
        $("html,body").css({"position":"fixed","top":(-1)*top+'px',"overflow":"hidden","z-index":1,"left":0,"right":0,"width":"100%"});
    }else{
        bottomDiv.css({"padding-top":fixedDiv.height() + 'px',"height":"100%"});
        $("html,body").css({"position":"fixed","top":(-1)*scroll_top+'px',"overflow":"hidden","z-index":1,"left":0,"right":0,"width":"100%"});
    }
}

//遮罩层 隐藏 body显示
export function filtrateHide(fixedDiv,bottomDiv,_className){
    fixedDiv.removeClass(_className);
    $("html,body").css({"position":"static","top":'auto',"overflow":"auto","z-index":"auto","width":"100%","height":"auto"});
    setScrollTop(scrollTop);
    if(scrollTop <= 0){
        bottomDiv.css({"padding-top":'0px'});
    }else{
        bottomDiv.css({"padding-top":fixedDiv.height() + 'px'});
    }
}

//解决iOS遮罩层滚动，底部跟着滚动问题 _this:整个div  parent:overflow-y:scroll的div  child:parent的子元素
export function blackTouchMove(_this,parent,child){
    _this.on("touchmove",function(e){
        let childHeight = $(this).find(child).height();
        let parentHeight = $(this).find(parent).height();
        let top = $(this).find(parent).scrollTop();
        let currentScroll = top + $(this).find(parent).get(0).offsetHeight + 1;
        let totalScroll = $(this).find(parent).get(0).scrollHeight;
        //判断子元素的高度是否大于父元素
        if(parentHeight + 1 < childHeight){
            //获取当前滚动的高度
            if(top == 0){
                $(this).find(parent).scrollTop(1);
            }else if(currentScroll >= totalScroll){
                $(this).find(parent).scrollTop(top - 1);
                e.stopPropagation();
                e.preventDefault();//阻止默认事件
            }
        }else{
            e.stopPropagation();
            e.preventDefault();//阻止默认事件
        }

        /*if(_this.find(e.target).length == 0){
            e.stopPropagation();
            e.preventDefault();//阻止默认事件
        }*/
    });

}

　　HTML结构如下：

<div class="filtrate">
    <div class="filtrate-relative">
        <div class="filter-msg">
            <div class="filtrate-list">
                <div class="filtrateHeight">
                    <div class="filtrate-list-item" data-id="item.id">
                        <p class="title">品牌1</p>
                        <div class="choose-list">
                            <div class="choose-item" data-id="1">建设银行A</div>
                        </div>
                    </div>
                    <div class="filtrate-list-item" data-id="item.id">
                        <p class="title">品牌1</p>
                        <div class="choose-list">
                            <div class="choose-item" data-id="1">建设银行A</div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="filtrate-btns">
                <button class="filtrate-cancel">取消</button>
                <button class="filtrate-submit">确定</button>
            </div>
        </div>
    </div>
    <div class="fix-bg" id="black-filtrate"></div>
</div>

　　CSS样式

@import "../../../css/common.less";
@import "./filtrate.less";
@import "./list-type.less";
@import "./res-item.less";

@fontColor:#A8A8A8;
@borderBottom:#ECECEC;
.triangle(@w:6px){
  0;
  height:0;
  border-@w;
  border-style: solid;
}
.triangle(B,@color){
  .triangle();
  border-color:@color transparent transparent transparent;
}
.triangle(T,@color){
  .triangle();
  border-color: transparent transparent @color transparent;
}
.triangle(L,@color){
  .triangle();
  border-color:transparent @color transparent transparent;
}
.triangle(R,@color){
  .triangle();
  border-color:transparent transparent transparent @color;
}


body{
  position:relative;
  height:auto;
}

.auto-fixed,body{
  background-color:@_colorWhite;
}

* {
  box-sizing: border-box;
}


.nFixed{
  position:fixed;
  top:0;
  left:0;
  right:0;
  z-index:507;
}




.gen-choose{
  position:relative;
  padding:8px 10px 0 10px;
  display: flex;
  display: -webkit-flex;
  align-items: center;
  border-bottom:1px solid @borderBottom;
  .gen-choose-item{
    position:relative;
    /*flex:1;
    margin-right:6px;*/
    calc(~"25% - 5px");
    margin-right:5px;
    //min-85px;
    border:1px solid transparent;
    border-bottom:none;
    &:last-child{
      margin-right:0;
    }
    .choose-item{
      margin-bottom:10px;
      display: flex;
      display: -webkit-flex;
      justify-content: center;
      align-items: center;
      border-radius: 30px;
      line-height:30px;
      background-color:#F3F3F3;
      p{
        color:#000000;
        font-size:12px;
      }
      i{
        display: block;
        margin-top:6px;
        margin-left:3px;
        .triangle(B,#8F8F8F);
      }
    }


    &.active{
      border:1px solid #E8E8E8;
      border-bottom:none;
      border-top-left-radius: 15px;
      border-top-right-radius: 15px;

      .choose-item{
        position:relative;
        background-color:transparent;
        i{
          margin-bottom:12px;
          margin-left:3px;
          .triangle(T,#FCDE39);
        }
      }
      .trans-border{
        100%;
        position:absolute;
        bottom:-1px;
        left:0;
        border:2px solid #fff;
        z-index:2;
      }
    }

  }

  .gen-choose-shade{
    display: none;
    margin:0 auto;
    position:fixed;
    top:0;
    left:0;
    right:0;
    100%;
    max-750px!important;
    height:179px;
    z-index:501;
    .item-msg{
      position:absolute;
      padding-bottom:45px;
      100%;
      height:100%;
      z-index:502;
      .item{
        padding:0 15px;
        height:100%;
        overflow-y: scroll;
        -webkit-overflow-scrolling:touch;
        background-color:@_colorWhite;
        .itemHeight{
          padding:5px 0;
          display: flex;
          flex-flow: wrap;
          .txt{
            padding: 5px 0;
             50%;
            &.active{
              color:#FFB51D;
            }
          }
        }
      }
      .gen-choose-btns{
        position:absolute;
        bottom:0;
        100%;
        height:45px;
        display: flex;
        align-items: center;
        border-top:1px solid #ECECEC;
        button{
          50%;
          height:45px;
          border:none;
          background-color:transparent;
          &:focus{
            outline:none;
          }
        }
        .choose-cancel{
          color:#A8A8A8;
          border-bottom-left-radius: 10px;
          background-color:@_colorWhite;
        }
        .choose-submit{
          color:#000;
          border-bottom-right-radius: 10px;
          background-color:#FCDE39;
        }


      }
    }

    .black-shade{
      100%;
      height:100%;
      background-color:rgba(0,0,0,.5);
    }
  }

}


.gen-imgs{
  padding:15px 10px;
  /*display: flex;
  align-items: center;
  flex-wrap:wrap;*/
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;

}

.positionX(){
  position:absolute;
  top:0;
  left:0;
}

.black-shade{
  display: none;
  position:fixed;
  top:0;
  left:0;
  right:0;
  bottom:0;
  100%;
  height:100%;
  overflow: hidden;
  background-color:rgba(0,0,0,.5);
  z-index:505;
}

//筛选列表
.filtrate{
  max-750px!important;
  display: none;
  margin:0 auto;
  position:fixed;
  top:0;
  left:0;
  bottom:0;
  right:0;
  z-index:508;
  .filtrate-relative{
    position:absolute;
    right:0;
    top:0;
    80%;
    height:100%;
    z-index:502;
    .filter-msg{
      position: relative;
      100%;
      height:100%;
      background-color:@_colorWhite;
      .filtrate-btns{
        position:absolute;
        bottom:0;
        padding:10px 10px 20px;
        display: flex;
        100%;
        background-color:@_colorWhite;
        button{
          padding:6px 0;
          flex:1;
          margin-right:10px;
          border:1px solid transparent;
          background-color:transparent;
          border-radius: 15px;
          font-size:15px;
          &:last-child{
            margin-right:0;
          }
          &:focus{
            outline:none;
          }
        }
        .filtrate-cancel{
          border:1px solid #F3F3F3;
          color:#A8A8A8;
        }
        .filtrate-submit{
          border:1px solid #FCDE39;
          background-color:#FCDE39;
          color:#000000
        }
      }
    }
  }
  .fix-bg{
    100%;
    height:100%;
    background-color:rgba(0,0,0,.5);
  }
}

　　js调用：

//阻止遮罩层滚动时，底部跟着滚动；
blackTouchMove($(".filtrate").find(".filtrate-relative"),".filtrate-list",".filtrateHeight");