Fix swiping stuck after zoom (issue #44) - second attempt

Author: yifaneye

src/components/Carousel/Carousel.module.css

@@ -42,6 +42,7 @@
   display: flex;
   justify-content: flex-start;
   align-items: flex-start;
+  touch-action: auto;
   flex: 0 1 auto;
 }
 

src/utils/useTouch.js

@@ -10,10 +10,7 @@ const getTouchDistinguisher = () => {
   }
 
   function _isPinch(event) {
-    return (
-      (event.touches !== undefined && event.touches.length > 1) ||
-      (event.scale !== undefined && event.scale !== 1)
-    );
+    return event.touches !== undefined && event.touches.length > 1;
   }
 
   function _wasPinch(event) {
@@ -50,8 +47,19 @@ const useTouch = (elementRef, { onTouchMove, onTouchEnd, onTap }) => {
       event.preventDefault();
   };
 
-  const shouldOmitEvent = (event) => {
-    return !!touchDistinguisher.isPinch(event);
+  const shouldOmitEvent = (event, displacementX = 0) => {
+    if (touchDistinguisher.isPinch(event)) return true;
+
+    // window.visualViewport is not yet supported on IE
+    if (!('visualViewport' in window)) return false;
+
+    const { scale, offsetLeft, width } = window.visualViewport;
+    if (scale <= 1) return false;
+    // pan right at or beyond the left edge
+    if (offsetLeft <= 0 && displacementX > 0) return false;
+    // pan left at or beyond the right edge
+    if (offsetLeft + width >= width * scale && displacementX < 0) return false;
+    return true;
   };
 
   const handleTouchStart = (event) => {
@@ -67,7 +75,7 @@ const useTouch = (elementRef, { onTouchMove, onTouchEnd, onTap }) => {
     event.stopPropagation();
     if (!isTouchStarted) return;
     const displacementX = event.changedTouches[0].clientX - touchStartX;
-    if (shouldOmitEvent(event)) return;
+    if (shouldOmitEvent(event, displacementX)) return;
     const displacementY = event.changedTouches[0].clientY - touchStartY;
     handleVerticalMovement(event, displacementX, displacementY);
     onTouchMove(displacementX, displacementY);
@@ -83,7 +91,7 @@ const useTouch = (elementRef, { onTouchMove, onTouchEnd, onTap }) => {
     event.stopPropagation();
     if (!isTouchStarted) return;
     const displacementX = event.changedTouches[0].clientX - touchStartX;
-    if (shouldOmitEvent(event)) {
+    if (shouldOmitEvent(event, displacementX)) {
       onTouchEnd(0, 0, 0);
       return;
     }