fix: fix scrolling in background behind the Modal (#620)

src/components/Modal/index.js

@@ -9,6 +9,7 @@ import { ESCAPE_KEY, TAB_KEY } from './../../libs/constants';
 import Header from './header';
 import CloseIcon from './closeIcon';
 import manageTab from './manageTab';
+import { disableScroll, enableScroll } from './scrollController';
 import './styles.css';
 
 /**
@@ -32,24 +33,24 @@ export default class Modal extends Component {
     componentDidMount() {
         const { isOpen } = this.props;
         if (isOpen) {
-            document.body.style.overflow = 'hidden';
+            disableScroll();
             this.modalTriggerElement = document.activeElement;
             this.modalRef.current.focus();
         }
     }
 
     componentDidUpdate() {
         const { isOpen } = this.props;
-        document.body.style.overflow = 'inherit';
+        enableScroll();
         if (isOpen) {
-            document.body.style.overflow = 'hidden';
+            disableScroll();
             this.modalTriggerElement = document.activeElement;
             this.modalRef.current.focus();
         }
     }
 
     componentWillUnmount() {
-        document.body.style.overflow = 'inherit';
+        enableScroll();
     }
 
     getBackDropClassNames() {

src/components/Modal/scrollController.js

@@ -0,0 +1,13 @@
+function preventDefault(e) {
+    e.preventDefault();
+}
+
+export function disableScroll() {
+    document.body.addEventListener('touchmove', preventDefault, { passive: false });
+    document.body.style.overflow = 'hidden';
+}
+
+export function enableScroll() {
+    document.body.removeEventListener('touchmove', preventDefault, { passive: false });
+    document.body.style.overflow = 'inherit';
+}