Prevent scrolling when modal is shown

client/src/App.vue

@@ -26,7 +26,6 @@
       showModal() {
         return this.$store.state.showModal
       }
-
     },
 
     mounted() {
@@ -38,7 +37,6 @@
   @import "styles/main.scss";
 
   .no-scroll {
-    height: 100vh;
-    overflow: hidden;
+    overflow-y: hidden;
   }
 </style>

client/src/store/index.js

@@ -9,7 +9,8 @@ export default new Vuex.Store({
   state: {
     specialContainerClass: '',
     showFilter: true,
-    showModal: false
+    showModal: false,
+    scrollPosition: 0
   },
 
   getters: {},
@@ -24,10 +25,12 @@ export default new Vuex.Store({
     setSpecialContainerClass({commit}, payload) {
       commit('setSpecialContainerClass', payload);
     },
-    hideModal({commit}) {
+    hideModal({commit, state}) {
+      document.body.classList.remove('no-scroll');
       commit('setModal', false);
     },
     showModal({commit}) {
+      document.body.classList.add('no-scroll');
       commit('setModal', true);
     }
   },
@@ -41,6 +44,9 @@ export default new Vuex.Store({
     },
     setSpecialContainerClass(state, payload) {
       state.specialContainerClass = payload;
+    },
+    setScrollPosition(state, payload) {
+      state.scrollPosition = payload;
     }
   }
 })