Estoy tratando de crear un diálogo modal en Vue. Cuando el cuadro de diálogo está abierto, quiero que se deshabilite el desplazamiento de la página, pero el usuario aún debería poder desplazarse por el cuadro de diálogo, y estaba tratando de lograr esto con preventDefault . Mi componente se ve así:

 <!--Modal.vue--> <template> <div v-show="open" class="modal" @scroll.stop.prevent @wheel.stop.prevent> <div class="mask"></div> <div class="overlay"> <div class="dialog"> <button @click="$emit('close')">CLOSE</button> <Paragraphs /> </div> </div> </div> </template> <script> import Paragraphs from "./Paragraphs"; export default { components: { Paragraphs, }, props: { open: Boolean, }, }; </script> <!--some scoped CSS here-->

Ejemplo de trabajo completo en la caja de arena https://codesandbox.io/s/optimistic-pond-3zrxsf

El problema es que, si bien esta disposición impide el desplazamiento de la página, también congela el desplazamiento en el cuadro de diálogo, lo cual no quiero. Y, aparentemente stopPropagation solo evita el burbujeo, pero no el árbol DOM, por lo que tampoco ayuda. ¿Qué puedo hacer para lograr esto?

Nota: no quiero establecer la propiedad overflow-y de la etiqueta del body , ya que elimina las barras de desplazamiento por completo y tiene un efecto de nerviosismo en el que todo se desplaza hacia un lado unos pocos píxeles cuando se abre o se cierra el cuadro de diálogo.