Fix zoom image move on mobile 💞 (#300)

.changeset/neat-taxis-search.md

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

packages/core/src/createZoomImageMove.ts

@@ -6,6 +6,7 @@ import { disableScroll, enableScroll, getSourceImage } from "./utils"
 export type ZoomImageMoveOptions = {
   zoomFactor?: number
   zoomImageSource?: string
+  // @deprecated
   disableScrollLock?: boolean
   zoomImageProps?: {
     alt?: string
@@ -18,13 +19,12 @@ export type ZoomImageMoveState = {
 
 export function createZoomImageMove(container: HTMLElement, options: ZoomImageMoveOptions = {}) {
   const sourceImgElement = getSourceImage(container)
-  const finalOptions: Omit<Required<ZoomImageMoveOptions>, "zoomImageProps"> = {
+  const finalOptions: Omit<Required<ZoomImageMoveOptions>, "zoomImageProps" | "disableScrollLock"> = {
     zoomFactor: options.zoomFactor ?? 4,
     zoomImageSource: options.zoomImageSource ?? sourceImgElement.src,
-    disableScrollLock: options.disableScrollLock ?? false,
   }
 
-  const { disableScrollLock, zoomFactor, zoomImageSource } = finalOptions
+  const { zoomFactor, zoomImageSource } = finalOptions
 
   const store = createStore<ZoomImageMoveState>({
     zoomedImgStatus: "idle",
@@ -47,17 +47,19 @@ export function createZoomImageMove(container: HTMLElement, options: ZoomImageMo
 
     processZoom(event)
 
-    if (!disableScrollLock) disableScroll()
+    if (event.pointerType !== "mouse") {
+      disableScroll()
+    }
   }
 
   function handlePointerMove(event: PointerEvent) {
     processZoom(event)
   }
 
-  function handlePointerLeave() {
+  function resetZoomedImg() {
     zoomedImg.style.display = "none"
     zoomedImg.style.transform = "none"
-    if (!disableScrollLock) enableScroll()
+    enableScroll()
   }
 
   const calculatePositionX = (newPositionX: number) => {
@@ -90,7 +92,8 @@ export function createZoomImageMove(container: HTMLElement, options: ZoomImageMo
   const { signal } = controller
   container.addEventListener("pointerenter", handlePointerEnter, { signal })
   container.addEventListener("pointermove", handlePointerMove, { signal })
-  container.addEventListener("pointerleave", handlePointerLeave, { signal })
+  container.addEventListener("pointerleave", resetZoomedImg, { signal })
+  container.addEventListener("pointercancel", resetZoomedImg, { signal })
 
   return {
     cleanup: () => {

packages/docs/src/api/createZoomImageMove.md

@@ -35,9 +35,6 @@ type ZoomImageMoveOptions = {
 
   // The source of zoomed image, default is the same as the original image
   zoomImageSource?: string
-
-  // Disable scroll lock on zoom, default is false
-  disableScrollLock?: boolean
 }
 
 function createZoomImageMove(

size.json

@@ -1,39 +1,39 @@
 {
   "@zoom-image/core": {
-    "createZoomImageWheel": "2.06 KB",
+    "createZoomImageWheel": "2.08 KB",
     "createZoomImageHover": "1.26 KB",
     "createZoomImageClick": "930 B",
-    "createZoomImageMove": "919 B",
+    "createZoomImageMove": "911 B",
     "cropImage": "386 B",
     "makeCalculateZoom": "132 B",
     "makeCalculatePercentage": "124 B"
   },
   "@zoom-image/react": {
-    "useZoomImageWheel": "2.36 KB",
+    "useZoomImageWheel": "2.35 KB",
     "useZoomImageHover": "1.54 KB",
     "useZoomImageClick": "1.16 KB",
-    "useZoomImageMove": "1.15 KB"
+    "useZoomImageMove": "1.14 KB"
   },
   "@zoom-image/preact": {
-    "useZoomImageWheel": "3.25 KB",
+    "useZoomImageWheel": "3.24 KB",
     "useZoomImageHover": "2.45 KB",
     "useZoomImageClick": "2.09 KB",
     "useZoomImageMove": "2.07 KB"
   },
   "@zoom-image/qwik": {
-    "useZoomImageWheel": "2.49 KB",
+    "useZoomImageWheel": "2.5 KB",
     "useZoomImageHover": "1.65 KB",
     "useZoomImageClick": "1.27 KB",
-    "useZoomImageMove": "1.26 KB"
+    "useZoomImageMove": "1.25 KB"
   },
   "@zoom-image/solid": {
     "useZoomImageWheel": "3.54 KB",
     "useZoomImageHover": "2.72 KB",
     "useZoomImageClick": "2.38 KB",
-    "useZoomImageMove": "2.37 KB"
+    "useZoomImageMove": "2.36 KB"
   },
   "@zoom-image/svelte": {
-    "useZoomImageWheel": "2.55 KB",
+    "useZoomImageWheel": "2.54 KB",
     "useZoomImageHover": "1.74 KB",
     "useZoomImageClick": "1.38 KB",
     "useZoomImageMove": "1.36 KB"
@@ -47,7 +47,7 @@
   "@zoom-image/angular": {
     "ZoomImageClickService": "3.83 KB",
     "ZoomImageHoverService": "3.83 KB",
-    "ZoomImageMoveService": "3.82 KB",
-    "ZoomImageWheelService": "3.82 KB"
+    "ZoomImageMoveService": "3.83 KB",
+    "ZoomImageWheelService": "3.83 KB"
   }
 }