feat(modal): lock body scrolling while modal is open

tobyzerner · tobyzerner · commit 59e693dd1d44 · 2023-11-07T09:08:27.000+10:30
diff --git a/src/modal/modal.ts b/src/modal/modal.ts
@@ -117,6 +117,8 @@ export default class ModalElement extends HTMLElement {
     }
 
     private async wasOpened() {
+        document.documentElement.style.overflow = 'hidden';
+
         this.hidden = false;
 
         hello(this);
@@ -127,6 +129,8 @@ export default class ModalElement extends HTMLElement {
     }
 
     private wasClosed() {
+        document.documentElement.style.overflow = '';
+
         this.focusTrap?.deactivate();
 
         goodbye(this).then(() => (this.hidden = true));

Original file line number	Diff line number	Diff line change
`@@ -117,6 +117,8 @@ export default class ModalElement extends HTMLElement {`
`117`	`117`	`}`
`118`	`118`
`119`	`119`	`private async wasOpened() {`
	`120`	`+ document.documentElement.style.overflow = 'hidden';`
	`121`	`+`
`120`	`122`	`this.hidden = false;`
`121`	`123`
`122`	`124`	`hello(this);`
`@@ -127,6 +129,8 @@ export default class ModalElement extends HTMLElement {`
`127`	`129`	`}`
`128`	`130`
`129`	`131`	`private wasClosed() {`
	`132`	`+ document.documentElement.style.overflow = '';`
	`133`	`+`
`130`	`134`	`this.focusTrap?.deactivate();`
`131`	`135`
`132`	`136`	`goodbye(this).then(() => (this.hidden = true));`