lock body scroll

src/App.vue

@@ -4,6 +4,7 @@
     :style="bgAppStyle"
   >
     <div
+      id="app_bg_wrapper"
       class="app-bg-wrapper"
       :style="bgStyle"
     />

src/components/media_modal/media_modal.vue

 <template>
   <div
     v-if="showing"
+    v-body-scroll-lock="showing"
     class="modal-view media-modal-view"
     @click.prevent="hide"
   >
@@ -43,6 +44,10 @@
 .media-modal-view {
   z-index: 1001;
 
+  body:not(.scroll-locked) & {
+    display: none;
+  }
+
   &:hover {
     .modal-view-button-arrow {
       opacity: 0.75;