移动端实现蒙层且底部页面不滚动效果

要求：根据工作需求我要实现一个蒙层的效果，蒙层里的盒子内容要可以滑动，底部页面不能滑动。
trying: 刚开始我用的是overflow:hidden,相信我这个你试个千八遍，连个毛线用都没有，????????????，后来我无意间我看到了antd-moblie中的Modal，然后就在想着使用这个，但是样式太难受了，下面要想加个按钮难受的一批????（样式人家都给固定了，改起来很费劲，挣扎了半天最终放弃了）。
结果： 后来自己写了一个原生的，想咋用咋用哈哈哈，希望能够帮助现在正在网上搜百度的你，最后一点这次的开头格式只是为了纯属好看，也希望给烦恼的你一些开心。
1.开始操作，首先，html排版下

<!-- 底部页面的布局 -->
 <div className="ee" >
          <button style={{ border: '1px solid red' }} onClick={this.showMeng.bind(this)}>
            点击出现蒙层</button>
          <ul>
            <li><img alt="" src="https://xxxxxx" /><img alt="" src="https://xxxxxx" /></li>
            <li><img alt="" src="https://xxxxxx" /><img alt="" src="https://xxxxxx" /></li>
            <li><img alt="" src="https://xxxxxx" /><img alt="" src="https://xxxxxx" /></li>
            <li><img alt="" src="https://xxxxxx" /><img alt="" src="https://xxxxxx" /></li>
            <li><img alt="" src="https://xxxxxx" /><img alt="" src="https://xxxxxx" /></li>
            <li><img alt="" src="https://xxxxxx" /><img alt="" src="https://xxxxxx" /></li>
            <li><img alt="" src="https://xxxxxx" /><img alt="" src="https://xxxxxx" /></li>
            <li><img alt="" src="https://xxxxxx" /><img alt="" src="https://xxxxxx" /></li>
            <li><img alt="" src="https://xxxxxx" /><img alt="" src="https://xxxxxx" /></li>
            <li><img alt="" src="https://xxxxxx" /><img alt="" src="https://xxxxxx" /></li>
            <li><img alt="" src="https://xxxxxx" /><img alt="" src="https://xxxxxx" /></li>
          </ul>
        </div>
        <!-- 蒙层 -->
        <div className="mantle">
          <div>
            <section>
              <h2>好好学习，天天向上</h2>
              <div style={{ textAlign: 'center', fontSize: '20px' }}>
                <div>吃好吃的吃吃吃吃吃</div>
                <div>吃好吃的吃吃吃吃吃</div>
                <div>吃好吃的吃吃吃吃吃</div>
                <div>吃好吃的吃吃吃吃吃</div>
                <div>吃好吃的吃吃吃吃吃</div>
                <div>吃好吃的吃吃吃吃吃</div>
                <div>吃好吃的吃吃吃吃吃</div>
                <div>吃好吃的吃吃吃吃吃</div>
                <div>吃好吃的吃吃吃吃吃</div>
                <div>吃好吃的吃吃吃吃吃</div>
                <div>吃好吃的吃吃吃吃吃</div>
                <div>吃好吃的吃吃吃吃吃</div>
                <div>吃好吃的吃吃吃吃吃</div>
                <div>吃好吃的吃吃吃吃吃</div>
                <div>吃好吃的吃吃吃吃吃</div>
                <div>吃好吃的吃吃吃吃吃</div>
                <div>吃好吃的吃吃吃吃吃</div>
                <div>吃好吃的吃吃吃吃吃</div>
                <div>吃好吃的吃吃吃吃吃</div>
                <div>吃好吃的吃吃吃吃吃</div>
                <div>吃好吃的吃吃吃吃吃</div>
                <div>吃好吃的吃吃吃吃吃</div>
                <div>吃好吃的吃吃吃吃吃</div>
                <div>吃好吃的吃吃吃吃吃</div>
                <div>吃好吃的吃吃吃吃吃</div>
                <div>吃好吃的吃吃吃吃吃</div>
                <div>吃好吃的吃吃吃吃吃</div>
                <div>吃好吃的吃吃吃吃吃</div>
                <div>吃好吃的吃吃吃吃吃</div>
                <div>吃好吃的吃吃吃吃吃</div>
                <div>吃好吃的吃吃吃吃吃</div>
                <div>吃好吃的吃吃吃吃吃</div>
                <div>吃好吃的吃吃吃吃吃</div>
                <div>吃好吃的吃吃吃吃吃</div>
                <div>吃好吃的吃吃吃吃吃</div>
                <div>吃好吃的吃吃吃吃吃</div>
              </div>
            </section>
            <div>
              <button onClick={this.closedMeng.bind(this)}>关闭按钮</button>
            </div>

          </div>
        </div>

2.css布局

.mantle{
  width: 100%;
  height: 100%;
  position: fixed;
  top:0;
  left:0;
  background-color:rgba(0,0,0,0.4);
  display: none;
  >div{
    position: absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
    width: 558px;
    height: 520px;
   section{
      width: 558px;
      height: 460px;
      background-color: #fff;
      ~div{
        width: 100%;
        height: 60px;
        display: inline-flex;
        justify-content: center;
        align-items: center;
      }
    }
    section >h2{
       width: 100%;
       height: 50px;
       background-color:blue;
       color:white;
       line-height: 46px;
       text-align: center;
    }
    section >div{
      width: 538px;
      margin:auto 0;
      height: 410px;
      overflow: scroll;
    }
    button{
      width: 200px;
      height: 40px;
      border-radius: 15px; 
      background-color: skyblue;
      color:yellow;
    }
  }
}

/*上面是蒙层里的布局，这个是底部页面的图片*/
li{
  width: 100%;
  display: inline-flex;
  >img{
    width: 50%;
  }
}

3.接下来展示的是弹出蒙层和关闭蒙层的事件

 // 关闭蒙层
  closedMeng = () => {
    $('.mantle').hide()
    let mo = function (e) { e.preventDefault() }
    document.body.style.overflow = ''// 出现滚动条
    document.removeEventListener('touchmove', mo, false)
  }


  // 开启蒙层
  showMeng = () => {
    $('.mantle').show()
    let mo = function (e) { e.preventDefault() }
    document.body.style.overflow = 'hidden'
    document.addEventListener('touchmove', mo, false)// 禁止页面滑动
  }

效果图：

注：我在页面中使用了jquery,所以如果你也想使用就要记得引入恩。
参考：https://www.cnblogs.com/sunhuinaxixi/p/10600927.html