From d5c39b6d3c39e207fa8186d7688e14f9b86ccbda Mon Sep 17 00:00:00 2001
From: Rishabh <zrishabhgarg@gmail.com>
Date: Thu, 21 Apr 2022 16:30:02 +0530
Subject: [PATCH] Removed background window scroll with Portal popup

refs https://github.com/TryGhost/Team/issues/1543

In some cases, when the background of page has scroll, scrolling inside Portal popup also scrolls the background page which causes confusion. To avoid this, we set the body of site to overflow hidden when Portal popup is opened to freeze the background, and then reset it back to original state when portal popup is hidden.
---
 ghost/portal/src/App.js | 14 ++++++++++++++
 1 file changed, 14 insertions(+)

diff --git a/ghost/portal/src/App.js b/ghost/portal/src/App.js
index f2f07ba31b..330b5d252a 100644
--- a/ghost/portal/src/App.js
+++ b/ghost/portal/src/App.js
@@ -66,6 +66,20 @@ export default class App extends React.Component {
         /**Handle custom trigger class change on popup open state change */
         if (prevState.showPopup !== this.state.showPopup) {
             this.handleCustomTriggerClassUpdate();
+
+            /** Remove background scroll when popup is opened */
+            try {
+                if (this.state.showPopup) {
+                    /** When modal is opened, store current overflow and set as hidden */
+                    this.bodyScroll = window.document?.body?.style?.overflow;
+                    window.document.body.style.overflow = 'hidden';
+                } else {
+                    /** When the modal is hidden, reset overflow property for body */
+                    window.document.body.style.overflow = this.bodyScroll || '';
+                }
+            } catch (e) {
+                /** Ignore any errors for scroll handling */
+            }
         }
 
         if (this.state.initStatus === 'success' && prevState.initStatus !== this.state.initStatus) {