Lock scrolling when overlay is active

kneasle · Jan 13, 2024 · da15f7f · da15f7f
1 parent 09890c8
commit da15f7f
Showing 1 changed file with 7 additions and 1 deletion.
diff --git a/main-page/ts/pageHandling.ts b/main-page/ts/pageHandling.ts
@@ -7,6 +7,8 @@ function loadPage(slug: string, category: string) {
   pageOverlay.classList.value = "";
   pageOverlay.classList.add("active");
   pageOverlay.classList.add(`category-${category}`);
+  // Lock document scrolling
+  document.body.style.overflowY = "hidden";
 
   // Clone a copy of the page box into the overlay
   loadedPageBox = document.getElementById(`subpage-item-${slug}`)!;
@@ -27,7 +29,7 @@ function loadPage(slug: string, category: string) {
   const container = pageOverlay.querySelector("#page-content")!;
   fetch(`/${slug}`)
     .then((response: Response) => response.text())
-    .then((text: string) => container.innerHTML = text);
+    .then((text: string) => (container.innerHTML = text));
 }
 
 function closeOverlay() {
@@ -40,9 +42,13 @@ function closeOverlay() {
 
   // Reset everything once the animation is over
   setTimeout(() => {
+    // Remove overlay
     pageOverlay.removeChild(clonedBox!);
     pageOverlay.classList.value = "";
+    // Re-enable scrolling
+    document.body.style.overflowY = "scroll";
 
+    // Clear variables
     clonedBox = null;
     loadedPageBox = null;
   }, 1250);