diff --git a/src/app/globals.css b/src/app/globals.css index fe77149..a8697bd 100644 --- a/src/app/globals.css +++ b/src/app/globals.css @@ -75,7 +75,8 @@ main { .no-scroll { overflow: hidden; - height: 100vh; /* Optional, but often recommended for full-page scroll prevention */ + height: 100%; /* Optional, but often recommended for full-page scroll prevention */ + touch-action: none; } .dark body { diff --git a/src/components/swipe-to-delete/SwipeToDelete.tsx b/src/components/swipe-to-delete/SwipeToDelete.tsx index cac42fd..5e3b6da 100644 --- a/src/components/swipe-to-delete/SwipeToDelete.tsx +++ b/src/components/swipe-to-delete/SwipeToDelete.tsx @@ -111,13 +111,14 @@ const SwipeToDelete: FC = ({ isSticky || velocity < -1000; setAllowOverscroll(false); + document.body.classList.remove('no-scroll'); if (!shouldDelete) { content.current?.classList.add('ios-ease'); text.current?.classList.add('ios-ease'); - document.body.classList.remove('no-scroll'); + const textWidth = text.current ? text.current.getBoundingClientRect().width : 0; - if (((velocity < 0 && Math.abs(velocity) > 10) || dragX < -textWidth * 1.5 && velocity > 0) && text.current && (dragX === 0 ? Math.abs(velocityY) < 5 : true)) { + if (((velocity < 0 && Math.abs(velocity) > 10) || dragX < -textWidth * 1.5 && velocity > 0) && text.current && (Math.abs(dragX) < 30 ? Math.abs(velocityY) < 5 : true)) { setDragX(-textWidth * 1.5); } else if (allowOverscroll && dragX > 0) { setDragX(0); @@ -201,7 +202,7 @@ const SwipeToDelete: FC = ({ node.removeEventListener("mousemove", handleMouseMove); node.removeEventListener("mouseup", handleEnd); } - }, [dragging, dragX, velocity, container]); + }, [dragging, dragX, velocity, velocityY, container]); const deleteTransform = isCollapsing ? `translateX(calc(${dragX}px + 5rem))`