Element-ui 图片预览滚动时候，禁止遮罩层后面的内容滚动

需求一：不通过点击图片进行预览，通过点击按钮预览图片。且当前页面没有图片

html代码：按钮

<el-button @click="showImg"> 点击按钮预览图片</el-button>

html代码：图片

图片的代码由于element-ui的图片预览组件，要求，图片的属性不能是display：none，且透明度不能为0；

因此，我想其实可以设置一个宽度近乎没有值。

<el-image 
    ref="preview"
    style="width: 0.01px; height: 0.01px;"
    :z-index="99999"
    :src="url"
    :preview-src-list="srcList"/>

需求二：图片预览时候，滚动鼠标齿轮，禁止遮罩层后面的内容 滚动JS 代码。

接下来就是JS的内容了。

data(){
    return {
    url: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
      srcList: [
        'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
      ],
      showImgPrew: false    
}，
methods: {

    /**
     * 预览大图
     */
    showImg () {
      this.$refs.preview.showViewer = true
      this.showImgPrew = true
      document.documentElement.style.overflowY = 'hidden'
    },
    doSth () {
      this.$refs.preview.showViewer = false
      this.showImgPrew = false
       document.documentElement.style.overflowY = 'auto'
    },
}
}