Scroll lock przy otwartym modalu

src/App.vue

@@ -82,7 +82,7 @@
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, provide, ref } from 'vue';
+import { computed, defineComponent, provide, ref, watch } from 'vue';
 
 import Clock from './components/App/Clock.vue';
 
@@ -163,6 +163,31 @@ export default defineComponent({
   async mounted() {
     this.updateStorage();
     this.setReleaseURL();
+
+    function preventScroll(e: Event) {
+      e.preventDefault();
+      e.stopPropagation();
+      e.stopImmediatePropagation();
+
+      return false;
+    }
+
+    watch(
+      () => this.store.blockScroll,
+      (value) => {
+        if (value) {
+          document.body.classList.add('no-scroll');
+          // document.querySelector('#app')!.addEventListener('wheel', preventScroll, { passive: false,  });
+          // document.querySelector('#app')!.addEventListener('touchmove', preventScroll, { passive: false });
+          return;
+        }
+
+        document.body.classList.remove('no-scroll');
+
+        // document.querySelector('#app')!.removeEventListener('wheel', preventScroll);
+        // document.querySelector('#app')!.removeEventListener('touchmove', preventScroll);
+      }
+    );
   },
 
   methods: {

src/components/JournalView/JournalDispatchers.vue

@@ -202,7 +202,7 @@ export default defineComponent({
       this.search();
     }
 
-    window.addEventListener('scroll', this.handleScroll);
+    window.addEventListener('wheel', this.handleScroll);
   },
 
   mounted() {
@@ -212,7 +212,7 @@ export default defineComponent({
   },
 
   deactivated() {
-    window.removeEventListener('scroll', this.handleScroll);
+    window.removeEventListener('wheel', this.handleScroll);
   },
 
   methods: {

src/components/JournalView/JournalTimetables.vue

@@ -236,7 +236,7 @@ export default defineComponent({
   },
 
   activated() {
-    window.addEventListener('scroll', this.handleScroll);
+    window.addEventListener('wheel', this.handleScroll);
 
     if (this.timetableId) {
       this.searchersValues['search-train'] = `#${this.timetableId}`;
@@ -249,7 +249,7 @@ export default defineComponent({
   },
 
   deactivated() {
-    window.removeEventListener('scroll', this.handleScroll);
+    window.removeEventListener('wheel', this.handleScroll);
   },
 
   methods: {

src/mixins/modalTrainMixin.ts

@@ -17,10 +17,15 @@ export default defineComponent({
   methods: {
     selectModalTrain(trainId: string) {
       this.store.chosenModalTrainId = trainId;
+      document.body.classList.add('no-scroll');
     },
 
     closeModal() {
       this.store.chosenModalTrainId = undefined;
+
+      setTimeout(() => {
+        document.body.classList.remove('no-scroll');
+      }, 150);
     },
   },
 });

src/mixins/returnBtnMixin.ts

@@ -25,10 +25,10 @@ export default defineComponent({
   },
 
   activated() {
-    window.addEventListener('scroll', this.handleScroll);
+    window.addEventListener('wheel', this.handleScroll);
   },
 
   deactivated() {
-    window.removeEventListener('scroll', this.handleScroll);
+    window.removeEventListener('wheel', this.handleScroll);
   },
 });

src/store/store.ts

@@ -51,6 +51,7 @@ export const useStore = defineStore('store', {
         trains: DataStatus.Loading,
       },
 
+      blockScroll: false,
       listenerLaunched: false,
     } as StoreState),
 
@@ -395,4 +396,3 @@ export const useStore = defineStore('store', {
     },
   },
 });
-

src/store/storeTypes.ts

@@ -42,6 +42,7 @@ export interface StoreState {
   };
 
   listenerLaunched: boolean;
+  blockScroll: boolean;
 }
 
 export interface APIData {

src/styles/global.scss

@@ -25,6 +25,15 @@ body {
   padding: 0;
   font-family: 'Quicksand', sans-serif;
   overflow-y: scroll;
+
+  &.no-scroll {
+    overflow-y: hidden;
+    padding-right: 17px;
+
+    @include smallScreen() {
+      padding: 0;
+    }
+  }
 }
 
 *:focus-visible {
@@ -37,16 +46,15 @@ body {
 }
 
 ::-webkit-scrollbar {
-  width: 0.5rem;
+  width: 17px;
-  height: 0.5rem;
+  height: 17px;
 
   &-track {
-    background: #222;
+    background-color: #222;
   }
 
   &-thumb {
-    border-radius: 1rem;
+    background-color: #777;
-    background: #777;
   }
 }