Fix scroll lock on mobile - all zoom 💞 (#307)

.changeset/afraid-hornets-turn.md

@@ -0,0 +1,5 @@
+---
+"@zoom-image/core": patch
+---
+
+Fix scroll lock on mobile - all zoom 💞

packages/core/src/createZoomImageClick.ts

@@ -97,6 +97,7 @@ export function createZoomImageClick(container: HTMLElement, options: ZoomImageC
   container.addEventListener("pointerenter", disableScrollLock ? noop : disableScroll, { signal })
   container.addEventListener("pointerleave", disableScrollLock ? noop : enableScroll, { signal })
   container.addEventListener("pointermove", handlePointerMove, { signal })
+  container.addEventListener("touchend", enableScroll, { signal })
 
   return {
     cleanup: () => {

packages/core/src/createZoomImageHover.ts

@@ -151,6 +151,7 @@ export function createZoomImageHover(container: HTMLElement, options: ZoomImageH
     container.addEventListener("pointerenter", handlePointerEnter, { signal })
     container.addEventListener("pointerleave", handlePointerLeave, { signal })
     window.addEventListener("scroll", handleScroll, { signal })
+    container.addEventListener("touchend", enableScroll, { signal })
 
     // Append zoomed image wrapper to zoom target
     zoomTarget.appendChild(zoomedImgWrapper)

packages/core/src/createZoomImageMove.ts

@@ -100,7 +100,7 @@ export function createZoomImageMove(container: HTMLElement, options: ZoomImageMo
   container.addEventListener("pointerenter", handlePointerEnter, { signal })
   container.addEventListener("pointermove", handlePointerMove, { signal })
   container.addEventListener("pointerleave", resetZoomedImg, { signal })
-  container.addEventListener("pointercancel", resetZoomedImg, { signal })
+  container.addEventListener("touchend", resetZoomedImg, { signal })
   container.addEventListener(
     "touchstart",
     (event) => {

packages/core/src/createZoomImageWheel.ts

@@ -437,6 +437,14 @@ export function createZoomImageWheel(container: HTMLElement, options: ZoomImageW
   container.addEventListener("pointerleave", handlePointerLeave, { signal })
   container.addEventListener("pointermove", handlePointerMove, { signal })
   container.addEventListener("pointerup", handlePointerUp, { signal })
+  container.addEventListener(
+    "touchend",
+    () => {
+      enabledScroll = true
+      enableScroll()
+    },
+    { signal },
+  )
 
   // Kick things off in case we have initial zoom other than 1
   if (store.getState().currentZoom !== defaultInitialState.currentZoom) {

packages/docs/src/components/HomePageShow.vue

@@ -94,9 +94,18 @@ watch(
     await nextTick()
 
     if (zoomType.value === "hover") {
+      const isMobile = window.innerWidth < 768
+      const isTablet = window.innerWidth < 1024
       createZoomImageHover(imageHoverContainerRef.value as HTMLDivElement, {
         zoomImageSource: imageURL,
-        customZoom: { width: 300, height: 400 },
+        customZoom: isMobile
+          ? {
+              width: 150,
+              height: 200,
+            }
+          : isTablet
+            ? { width: 200, height: 300 }
+            : { width: 300, height: 400 },
         zoomTarget: zoomTargetRef.value as HTMLDivElement,
         scale: 2,
       })
@@ -180,7 +189,7 @@ watch(
         class="relative mt-1 flex h-[200px] w-[133.33px] items-start sm:h-[250px] sm:w-[166.66px] lg:h-[300px] lg:w-[200px]"
       >
         <img class="h-full w-full" alt="Small Pic" :src="imageURL" />
-        <div ref="zoomTargetRef" class="absolute left-[220px] sm:left-[300px] lg:left-[350px]"></div>
+        <div ref="zoomTargetRef" class="absolute left-[150px] sm:left-[300px] lg:left-[350px]"></div>
       </div>
     </div>
 

size.json

@@ -1,53 +1,53 @@
 {
   "@zoom-image/core": {
-    "createZoomImageWheel": "2.08 KB",
-    "createZoomImageHover": "1.26 KB",
-    "createZoomImageMove": "991 B",
-    "createZoomImageClick": "930 B",
+    "createZoomImageWheel": "2.09 KB",
+    "createZoomImageHover": "1.28 KB",
+    "createZoomImageMove": "988 B",
+    "createZoomImageClick": "936 B",
     "cropImage": "386 B",
     "makeCalculateZoom": "132 B",
     "makeCalculatePercentage": "124 B"
   },
   "@zoom-image/react": {
-    "useZoomImageWheel": "2.35 KB",
-    "useZoomImageHover": "1.54 KB",
+    "useZoomImageWheel": "2.37 KB",
+    "useZoomImageHover": "1.55 KB",
     "useZoomImageMove": "1.22 KB",
-    "useZoomImageClick": "1.16 KB"
+    "useZoomImageClick": "1.17 KB"
   },
   "@zoom-image/preact": {
-    "useZoomImageWheel": "3.24 KB",
-    "useZoomImageHover": "2.45 KB",
+    "useZoomImageWheel": "3.26 KB",
+    "useZoomImageHover": "2.46 KB",
     "useZoomImageMove": "2.15 KB",
-    "useZoomImageClick": "2.09 KB"
+    "useZoomImageClick": "2.1 KB"
   },
   "@zoom-image/qwik": {
-    "useZoomImageWheel": "2.5 KB",
-    "useZoomImageHover": "1.65 KB",
+    "useZoomImageWheel": "2.51 KB",
+    "useZoomImageHover": "1.66 KB",
     "useZoomImageMove": "1.33 KB",
-    "useZoomImageClick": "1.27 KB"
+    "useZoomImageClick": "1.28 KB"
   },
   "@zoom-image/solid": {
-    "useZoomImageWheel": "3.54 KB",
-    "useZoomImageHover": "2.72 KB",
+    "useZoomImageWheel": "3.55 KB",
+    "useZoomImageHover": "2.74 KB",
     "useZoomImageMove": "2.44 KB",
-    "useZoomImageClick": "2.38 KB"
+    "useZoomImageClick": "2.39 KB"
   },
   "@zoom-image/svelte": {
-    "useZoomImageWheel": "2.54 KB",
-    "useZoomImageHover": "1.74 KB",
+    "useZoomImageWheel": "2.56 KB",
+    "useZoomImageHover": "1.75 KB",
     "useZoomImageMove": "1.44 KB",
     "useZoomImageClick": "1.38 KB"
   },
   "@zoom-image/vue": {
-    "useZoomImageWheel": "2.34 KB",
+    "useZoomImageWheel": "2.35 KB",
     "useZoomImageHover": "1.53 KB",
     "useZoomImageMove": "1.21 KB",
-    "useZoomImageClick": "1.15 KB"
+    "useZoomImageClick": "1.16 KB"
   },
   "@zoom-image/angular": {
-    "ZoomImageClickService": "3.92 KB",
-    "ZoomImageHoverService": "3.92 KB",
-    "ZoomImageMoveService": "3.92 KB",
-    "ZoomImageWheelService": "3.92 KB"
+    "ZoomImageHoverService": "3.94 KB",
+    "ZoomImageWheelService": "3.94 KB",
+    "ZoomImageMoveService": "3.94 KB",
+    "ZoomImageClickService": "3.94 KB"
   }
 }