diff --git a/packages/web/src/javascripts/Components/Panes/usePaneGesture.ts b/packages/web/src/javascripts/Components/Panes/usePaneGesture.ts index 1ab7a5dc0..03f336615 100644 --- a/packages/web/src/javascripts/Components/Panes/usePaneGesture.ts +++ b/packages/web/src/javascripts/Components/Panes/usePaneGesture.ts @@ -78,12 +78,14 @@ export const usePaneSwipeGesture = ( underlayElementRef.current = element.parentElement?.querySelector(`[data-pane-underlay="${element.id}"]`) || null let startX = 0 + let startTimestamp = Date.now() let clientX = 0 + let moveTimestamp = startTimestamp let closestScrollContainer: HTMLElement | null let scrollContainerAxis: 'x' | 'y' | null = null let canceled = false - const TouchMoveThreshold = 25 + const TouchMoveThreshold = requiresStartFromEdge ? 25 : 45 const TouchStartThreshold = direction === 'right' ? 25 : window.innerWidth - 25 const SwipeFinishThreshold = window.innerWidth / 2.5 @@ -100,6 +102,8 @@ export const usePaneSwipeGesture = ( const touchStartListener = (event: TouchEvent) => { startX = 0 clientX = 0 + startTimestamp = Date.now() + moveTimestamp = startTimestamp scrollContainerAxis = null canceled = false @@ -193,14 +197,18 @@ export const usePaneSwipeGesture = ( const touch = event.touches[0] clientX = touch.clientX + moveTimestamp = Date.now() const deltaX = clientX - startX - if (Math.abs(deltaX) < TouchMoveThreshold) { + if (deltaX < TouchMoveThreshold) { return } - if (closestScrollContainer && closestScrollContainer.style.overflowY !== 'hidden') { + const timestampDelta = moveTimestamp - startTimestamp + const canDisableScroll = requiresStartFromEdge || (timestampDelta > 150 && clientX > TouchStartThreshold) + + if (closestScrollContainer && closestScrollContainer.style.overflowY !== 'hidden' && canDisableScroll) { closestScrollContainer.style.overflowY = 'hidden' }