解决滑动遮罩层，遮罩层下面内容滚动的问题

示例（vue业务场景，配合mint-ui）

<template>
  <div class="wrap" :class='show?"fix":""' >
       <mt-button type="primary" @click.native="handleClick">primary button</mt-button>
       <ul>
            <li v-for='(item,key) in list' :key='key'>{{item}}</li>
        </ul>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        show:false,
        list:[1,2,3,4,5,6,7,8,9,0,1,2,3,4,5,6,7,8,9,0,1,2,3,4,5,6,7,8,9,0]
      };
    },
    methods: {
      handleClick() {
            // 获取当前的滚动高度
            let scrollTop = document.scrollingElement.scrollTop;
            this.$messagebox.alert('操作成功!').then(action => {
                if(action==='confirm'){
                    //使其盒子的删除fix类名
                    this.show=false;
                   //还原body的原来的滚动高度
                    document.scrollingElement.scrollTop = scrollTop;
                }
            });
            //使其盒子的添加fix类名
            this.show=true;
           //设置body的top值为当前滑动高度（固定遮罩层下的内容，禁止滑动）
            document.body.style.top = -scrollTop + 'px';
      }
    },
  };

</script>
<style lang="scss" scoped>
  .wrap {
    &.fix{
      position: fixed;
    }
  }

</style>

讲解

主要利用 position: fixed;，改变其position的值及其body的top值，来固定底层

• 当点击按钮，遮罩层出现时，获取当前的滚动高度
• 给要禁止滑动的底层（示例中的wrap）添加fix类名（即 position: fixed;）
• 设置body的top值为当前滑动高度（固定遮罩层下的内容，禁止滑动）
• 当遮罩层消失，删除fix类名，还原原来的滚动高度