From 1a5bc21c44a4f1e0ecbe90745c202a1967162f5a Mon Sep 17 00:00:00 2001 From: es27 Date: Tue, 3 Mar 2026 17:41:30 +0200 Subject: [PATCH] fix: fall back to other axis when main scroll direction is not scrollable MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit When a touch gesture has a slightly larger horizontal delta than vertical (common during natural diagonal swipes), shouldCancelEvent determines moveDirection as 'h'. If no element in the hierarchy is horizontally scrollable, the event is immediately cancelled via preventDefault() — even though the user's intent is to scroll vertically. This change checks the perpendicular axis before blocking: if the other direction is scrollable, the gesture is allowed and the axis is switched accordingly. The event is only cancelled when neither axis can be scrolled. Fixes scroll blocking in modals/dialogs on mobile devices when the user's finger drifts slightly off the vertical axis during a swipe. --- src/SideEffect.tsx | 12 +++++++++++- 1 file changed, 11 insertions(+), 1 deletion(-) diff --git a/src/SideEffect.tsx b/src/SideEffect.tsx index 574b287..b8d1e57 100644 --- a/src/SideEffect.tsx +++ b/src/SideEffect.tsx @@ -85,7 +85,17 @@ export function RemoveScrollSideCar(props: IRemoveScrollEffectProps) { let canBeScrolledInMainDirection = locationCouldBeScrolled(moveDirection, target); if (!canBeScrolledInMainDirection) { - return true; + // If the main direction can't be scrolled, check the other axis. + // This prevents blocking vertical scroll when the initial touch delta + // is slightly more horizontal than vertical (diagonal swipe). + const otherAxis: Axis = moveDirection === 'v' ? 'h' : 'v'; + + if (locationCouldBeScrolled(otherAxis, target)) { + currentAxis = otherAxis; + canBeScrolledInMainDirection = true; + } else { + return true; + } } if (canBeScrolledInMainDirection) {