@hoangyell/gallery 1.0.6 → 1.0.8

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hoangyell/gallery",
-  "version": "1.0.6",
+  "version": "1.0.8",
   "description": "Astro image gallery with lightbox, pyramid multi-row layout, and accessible controls.",
   "license": "MIT",
   "type": "module",

package/src/Gallery.astro

@@ -500,6 +500,13 @@ if (resolvedRows <= 1 || galleryItems.length <= 1) {
     currentIndex: number;
     touchStartX: number;
     touchStartY: number;
+    lockedScrollY: number;
+    previousBodyOverflow: string;
+    previousBodyPosition: string;
+    previousBodyTop: string;
+    previousBodyWidth: string;
+    previousHtmlOverflow: string;
+    previousHtmlScrollBehavior: string;
 
     constructor(el: HTMLElement) {
       this.gallery = el;
@@ -514,6 +521,13 @@ if (resolvedRows <= 1 || galleryItems.length <= 1) {
       this.currentIndex = -1;
       this.touchStartX = 0;
       this.touchStartY = 0;
+      this.lockedScrollY = -1;
+      this.previousBodyOverflow = "";
+      this.previousBodyPosition = "";
+      this.previousBodyTop = "";
+      this.previousBodyWidth = "";
+      this.previousHtmlOverflow = "";
+      this.previousHtmlScrollBehavior = "";
 
       this.bind();
       document.addEventListener("astro:before-swap", this.forceClose);
@@ -539,10 +553,10 @@ if (resolvedRows <= 1 || galleryItems.length <= 1) {
 
         document.removeEventListener("keydown", this.handleKey);
         document.removeEventListener("gesturestart", this.preventZoom);
-        document.body.style.overflow = "";
         const main = document.querySelector("main");
         if (main) main.removeAttribute("inert");
       }
+      this.unlockBackgroundScroll();
       document.removeEventListener("astro:before-swap", this.forceClose);
     };
 
@@ -561,7 +575,7 @@ if (resolvedRows <= 1 || galleryItems.length <= 1) {
       this.preload(index + 1);
 
       document.body.appendChild(this.overlay);
-      document.body.style.overflow = "hidden";
+      this.lockBackgroundScroll();
       const main = document.querySelector("main");
       if (main) main.setAttribute("inert", "");
       this.overlay.focus();
@@ -650,7 +664,7 @@ if (resolvedRows <= 1 || galleryItems.length <= 1) {
         this.imgEl = null;
         this.counterEl = null;
 
-        document.body.style.overflow = "";
+        this.unlockBackgroundScroll();
         const main = document.querySelector("main");
         if (main) main.removeAttribute("inert");
 
@@ -663,6 +677,41 @@ if (resolvedRows <= 1 || galleryItems.length <= 1) {
       }, 300);
     };
 
+    lockBackgroundScroll = () => {
+      if (this.lockedScrollY >= 0) return;
+
+      this.lockedScrollY = window.scrollY;
+      this.previousBodyOverflow = document.body.style.overflow;
+      this.previousBodyPosition = document.body.style.position;
+      this.previousBodyTop = document.body.style.top;
+      this.previousBodyWidth = document.body.style.width;
+      this.previousHtmlOverflow = document.documentElement.style.overflow;
+      this.previousHtmlScrollBehavior = document.documentElement.style.scrollBehavior;
+
+      document.documentElement.style.overflow = "hidden";
+      document.body.style.overflow = "hidden";
+      document.body.style.position = "fixed";
+      document.body.style.top = `-${this.lockedScrollY}px`;
+      document.body.style.width = "100%";
+    };
+
+    unlockBackgroundScroll = () => {
+      if (this.lockedScrollY < 0) return;
+
+      document.documentElement.style.overflow = this.previousHtmlOverflow;
+      document.body.style.overflow = this.previousBodyOverflow;
+      document.body.style.position = this.previousBodyPosition;
+      document.body.style.top = this.previousBodyTop;
+      document.body.style.width = this.previousBodyWidth;
+      document.documentElement.style.scrollBehavior = "auto";
+      window.scrollTo({ top: this.lockedScrollY, left: 0, behavior: "auto" });
+      requestAnimationFrame(() => {
+        document.documentElement.style.scrollBehavior =
+          this.previousHtmlScrollBehavior;
+      });
+      this.lockedScrollY = -1;
+    };
+
     navigate = (dir: number) => {
       const next = this.currentIndex + dir;
       if (next < 0 || next >= this.items.length) return;