Fix(web): Simplify scroll blocking used by Modal and OffCanvas to CSS-only solution #DS-1124

Author: crishpeen

packages/web/src/js/utils/ScrollControl.ts

@@ -27,12 +27,8 @@ class ScrollControl {
     const clientOffset = this.element.tagName === 'BODY' ? window.innerWidth : this.element.offsetWidth;
     // Browser scrollbar width, may be 0 on some devices, but solves offset when is not 0.
     const scrollBarWidth = clientOffset - this.element.clientWidth;
-    // Save Y offset for later purpose
-    this.offsetY = window.scrollY;
     // Fixing page offset causing scrollbar on some devices
     this.element.style.paddingRight = `${scrollBarWidth}px`;
-    // Fixing position
-    this.element.style.top = `-${this.offsetY}px`;
     // Add body class
     this.element.classList.add(SCROLLING_DISABLED_CLASSNAME);
   }
@@ -44,11 +40,8 @@ class ScrollControl {
       executeAfterTransition(this.target, () => {
         // Reset style values
         this.element.style.paddingRight = '';
-        this.element.style.top = '';
         // Remove body class
         this.element.classList.remove(SCROLLING_DISABLED_CLASSNAME);
-        // Scroll after close to saved Y offset position
-        window.scrollTo(0, this.offsetY);
       });
     }
   }

packages/web/src/scss/components/Modal/_Modal.scss

@@ -22,6 +22,7 @@
     visibility: hidden; // 1.
     opacity: 0; // 1.
     pointer-events: none; // 1.
+    overscroll-behavior: contain;
 
     // 2.
     &::backdrop {

packages/web/src/scss/helpers/scroll-control/_scroll-control.scss

@@ -1,5 +1,3 @@
 .is-scrolling-disabled {
-    position: fixed;
-    width: 100%;
-    overflow-y: hidden;
+    overflow: hidden;
 }