From 3e909f93b2e7a1834cb0f7a70c67e4d333185eb0 Mon Sep 17 00:00:00 2001 From: Robin Malfait Date: Thu, 21 Dec 2023 02:38:46 +0100 Subject: [PATCH 1/2] further fine tune scroll locking on iOS --- .../document-overflow/handle-ios-locking.ts | 36 +++++++++---------- 1 file changed, 16 insertions(+), 20 deletions(-) diff --git a/packages/@headlessui-react/src/hooks/document-overflow/handle-ios-locking.ts b/packages/@headlessui-react/src/hooks/document-overflow/handle-ios-locking.ts index 24b4f177aa..2c577e3400 100644 --- a/packages/@headlessui-react/src/hooks/document-overflow/handle-ios-locking.ts +++ b/packages/@headlessui-react/src/hooks/document-overflow/handle-ios-locking.ts @@ -95,30 +95,26 @@ export function handleIOSLocking(): ScrollLockStep { // Check if we are scrolling inside any of the allowed containers, if not let's cancel the event! if (e.target instanceof HTMLElement) { if (inAllowedContainer(e.target as HTMLElement)) { - // We are in an allowed container, however on iOS the page can still scroll in - // certain scenarios... - let rootContainer = e.target - while ( - rootContainer.parentElement && - inAllowedContainer(rootContainer.parentElement) - ) { - rootContainer = rootContainer.parentElement! - } - - let scrollableParent = rootContainer + // Even if we are in an allowed container, on iOS the main page can still scroll, we + // have to make sure that we `event.preventDefault()` this event to prevent that. + // + // However, if we happen to scroll on an element that is overflowing, or any of its + // parents are overflowing, then we should not call `event.preventDefault()` because + // otherwise we are preventing the user from scrolling inside that container which + // is not what we want. + let scrollableParent = e.target while ( scrollableParent.parentElement && - // Assumption that we are always used in a Headless UI Portal. Once we reach the - // portal, its over. + // Assumption: We are always used in a Headless UI Portal. Once we reach the + // portal itself, we can stop crawling up the tree. scrollableParent.dataset.headlessuiPortal !== '' ) { - // Verify that we are in a scrollable container (which may or may not overflow yet) - let css = window.getComputedStyle(scrollableParent) - if (/(auto|scroll)/.test(css.overflow + css.overflowY + css.overflowX)) { - break - } - - // Check if the scrollable container is already overflowing + // Check if the scrollable container is overflowing or not. + // + // NOTE: we could check the `overflow`, `overflow-y` and `overflow-x` properties + // but when there is no overflow happening then the `overscrollBehavior` doesn't + // seem to work and the main page will still scroll. So instead we check if the + // scrollable container is overflowing or not and use that heuristic instead. if ( scrollableParent.scrollHeight > scrollableParent.clientHeight || scrollableParent.scrollWidth > scrollableParent.clientWidth From 99c9da3b5153e7043038a0560d123e01189f5492 Mon Sep 17 00:00:00 2001 From: Robin Malfait Date: Thu, 21 Dec 2023 02:46:17 +0100 Subject: [PATCH 2/2] update CHANGELOG --- packages/@headlessui-react/CHANGELOG.md | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/packages/@headlessui-react/CHANGELOG.md b/packages/@headlessui-react/CHANGELOG.md index ea183915ae..f9eacb2015 100644 --- a/packages/@headlessui-react/CHANGELOG.md +++ b/packages/@headlessui-react/CHANGELOG.md @@ -7,7 +7,9 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 ## [Unreleased] -- Nothing yet! +### Fixed + +- Further fine tune scroll locking on iOS ([#2891](https://github.com/tailwindlabs/headlessui/pull/2891)) ## [2.0.0-alpha.2] - 2023-12-20