vue弹出遮罩 禁止滚动的做法

<div class="toast_box" v-if="qrCodeShow" @click.self="hide" @touchmove.prevent @mousewheel.prevent>
</div>

CSS

• position的值由absolute改为fixed，可以解决弹框前已经滚动个屏幕，且滚动范围大于屏幕时,遮罩填充不完全的问题

.toast_box {
/* position: absolute; */
  position: fixed;
  z-index: 999999999;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
}

• position设置为absolute

  
  image.png

• position设置为fixed

  
  image.png