第一种情况比较简单，弹框和页面都不可滚动

    
    
     
        
      
this is a box
        
      
this is a box
        
      
this is a box
        
          
     
    

.mask{    position: fixed;    top: 0;    left: 0;    z-index: 999;    width: 100%;    height: 100%;    display: none;    background: rgba(0,0,0,.7);}.box{    position: absolute;    top: 50%;    left: 50%;    transform: translate3d(-50%, -50%, 0);    padding: 10px;    background: #fff;    text-align: center;}

var oBtn = document.getElementById("btn"),    oMask = document.getElementById("mask"),    oBox = document.getElementById("box"),    oClose = document.getElementById("close");oBtn.onclick = () => {    oMask.style.display = 'block';}oClose.onclick = () => {    oMask.style.display = 'none';}oMask.addEventListener('touchmove', (e) => {    e.preventDefault();});

第二种情况是弹框可滚动，页面不可滚动

1.移动端兼容性不好，可应用于pc端

  
    
    
     
        
      
this is a box
        
      
this is a box
        
      
this is a box
        
      
this is a box
        
      
this is a box
        
      
this is a box
        
      
this is a box
        
          
     
    

.mask{    position: fixed;    top: 0;    left: 0;    z-index: 999;    width: 100%;    height: 100%;    display: none;    background: rgba(0,0,0,.7);}.box{    position: absolute;    top: 50%;    left: 50%;    transform: translate3d(-50%, -50%, 0);    width: 200px;    height: 200px;    padding: 10px;    overflow-y: scroll;    -webkit-overflow-scrolling : touch;    background: #fff;    text-align: center;}

var oBtn = document.getElementById("btn"),    oMask = document.getElementById("mask"),    oBox = document.getElementById("box"),    oClose = document.getElementById("close");oBtn.onclick = () => {    oMask.style.display = 'block';    document.body.style.height = '100%';    document.body.style.overflow = 'hidden';    document.documentElement.style.overflow='hidden'}oClose.onclick = () => {    oMask.style.display = 'none';    document.body.style.height = 'auto';    document.body.style.overflow = 'scroll';    document.documentElement.style.overflow='scroll'}

2.适用于移动端

    
    
     
    
     
        
      
this is a box
        
      
this is a box
        
      
this is a box
        
      
this is a box
        
      
this is a box
        
      
this is a box
        
      
this is a box
        
      
this is a box
        
          
     
    

.maskWrap{    position: fixed;    top: 0;    left: 0;    z-index: 999;    width: 100%;    height: 100%;    display: none;}.mask{    position: absolute;    top: 0;    left: 0;    bottom: 0;    right: 0;    z-index: 1;    background-color: rgba(0, 0, 0, .7);}.box{    position: absolute;    top: 50%;    left: 50%;    transform: translate3d(-50%, -50%, 0);    z-index: 2;    width: 200px;    height: 200px;    overflow-y: scroll;    -webkit-overflow-scrolling : touch;    padding: 10px;    background: #fff;    text-align: center;}

var oBtn = document.getElementById("btn"),    oMaskWrap = document.getElementById("maskWrap"),    oMask = document.getElementById("mask"),    oBox = document.getElementById("box"),    oClose = document.getElementById("close");oBtn.onclick = () => {    oMaskWrap.style.display = 'block';}oClose.onclick = () => {    oMaskWrap.style.display = 'none';}oMask.addEventListener('touchstart', (e) => {    e.preventDefault();});let startY = 0; // 记录开始滑动的坐标，用于判断滑动方向let status = 0; // 0：未开始，1：已开始，2：滑动中// 核心部分oBox.addEventListener('touchstart', e => {    status = 1;    startY = e.targetTouches[0].pageY;}, false);oBox.addEventListener('touchmove', e => {    // 判定一次就够了    if (status !== 1) return;    status = 2;    let t = e.target || e.srcElement;    let py = e.targetTouches[0].pageY;    let ch = t.clientHeight; // 内容可视高度    let sh = t.scrollHeight; // 内容滚动高度    let st = t.scrollTop; // 当前滚动高度    // 已经到头部尽头了还要向上滑动，阻止它    if (st === 0 &&  py > startY) {        // console.log(st + '/' + py + '/' + startY);        e.preventDefault();    }    // 已经到低部尽头了还要向下滑动，阻止它    if ((st === sh - ch) &&  py < startY) {        // console.log(st + '/' + (sh - ch) + '/' + py + '/' + startY);        e.preventDefault();    }}, false);oBox.addEventListener('touchend', e => {    status = 0;}, false);

3.适用于移动端和pc端

var oBtn = document.getElementById("btn"),    oMaskWrap = document.getElementById("maskWrap"),    oMask = document.getElementById("mask"),    oBox = document.getElementById("box"),    oClose = document.getElementById("close");    var isFixed = 0;oBtn.onclick = () => {    oMaskWrap.style.display = 'block';    isFixed = 1;}oClose.onclick = () => {    oMaskWrap.style.display = 'none';    isFixed = 0;}var bodyEl = document.body;var top = 0;function stopBodyScroll (isFixed) {    console.log(isFixed)    if (isFixed) {        top = window.scrollY;        bodyEl.style.position = 'fixed';        bodyEl.style.top = -top + 'px';    } else {        bodyEl.style.position = '';        bodyEl.style.top = '';        window.scrollTo(0, top); // 回到原先的top    }}// window.onscroll = stopBodyScroll(isFixed);document.addEventListener("onscroll", function (e) {    stopBodyScroll(isFixed);})