Infrastructure/ghost
0
Fork 0
mirror of https://github.com/TryGhost/Ghost.git synced 2025-02-10 23:36:14 -05:00
Code Issues Activity

Removed background window scroll with Portal popup

Browse source 
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.
This commit is contained in:
Rishabh 2022-04-21 16:30:02 +05:30
parent e64684655b
commit d5c39b6d3c
1 changed files with 14 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

14
ghost/portal/src/App.js
View file

@ -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) {