引自：https://uedsky.com/demo/modal-scroll.html

css

body.modal-open {    position: fixed;    width: 100%;}

html

     
  
      Open Modal  
      
    
       
        请使用手机浏览
       
    
         
      
  
      Open Modal 2 (restore scrolling position)  
      
     
     
  
      
    
       
            这里是可滚动内容
        
    Modal Content
        
    Modal Content
        
    Modal Content
        
    Modal Content
        
    Modal Content
        
    Modal Content
        
    Modal Content
        
    Modal Content
        
    Modal Content
        
    Modal Content
        
    Modal Content
        
    
       
  
      
     

js

var ModalHelper = (function(bodyCls) {    var scrollTop;    return {      afterOpen: function() {        scrollTop = document.scrollingElement.scrollTop;        document.body.classList.add(bodyCls);        document.body.style.top = -scrollTop + 'px';      },      beforeClose: function() {        document.body.classList.remove(bodyCls);        // scrollTop lost after set position:fixed, restore it back.        document.scrollingElement.scrollTop = scrollTop;      }    };  })('modal-open');  function openModal() {    document.getElementById('modal').style.display = 'block';    ModalHelper.afterOpen();  }  function closeModal() {    ModalHelper.beforeClose();    document.getElementById('modal').style.display = 'none';  }  var btns = document.querySelectorAll('.js-open-modal');  btns[0].onclick = openModal;  btns[1].onclick = openModal;  document.querySelector('#modal').onclick = closeModal;