From c888ad6eaf9aca614b5fa47eb9c181fcbbd5f256 Mon Sep 17 00:00:00 2001 From: csorfab Date: Sat, 23 Sep 2023 22:38:59 +0200 Subject: [PATCH 1/3] fix blocking all scrolling when RemoveScroll is used within ShadowRoot --- src/SideEffect.tsx | 18 +++++++++++++++--- 1 file changed, 15 insertions(+), 3 deletions(-) diff --git a/src/SideEffect.tsx b/src/SideEffect.tsx index 4a6264d..269dc50 100644 --- a/src/SideEffect.tsx +++ b/src/SideEffect.tsx @@ -26,7 +26,7 @@ let idCounter = 0; let lockStack: any[] = []; export function RemoveScrollSideCar(props: IRemoveScrollEffectProps) { - const shouldPreventQueue = React.useRef>([]); + const shouldPreventQueue = React.useRef>([]); const touchStartRef = React.useRef([0, 0]); const activeAxis = React.useRef(); const [id] = React.useState(idCounter++); @@ -114,7 +114,7 @@ export function RemoveScrollSideCar(props: IRemoveScrollEffectProps) { const delta = 'deltaY' in event ? getDeltaXY(event) : getTouchXY(event); const sourceEvent = shouldPreventQueue.current.filter( - (e) => e.name === event.type && e.target === event.target && deltaCompare(e.delta, delta) + (e) => e.name === event.type && (e.target === event.target || event.target === e.shadowParent) && deltaCompare(e.delta, delta) )[0]; // self event, and should be canceled @@ -145,7 +145,7 @@ export function RemoveScrollSideCar(props: IRemoveScrollEffectProps) { }, []); const shouldCancel = React.useCallback((name: string, delta: number[], target: any, should: boolean) => { - const event = { name, delta, target, should }; + const event = { name, delta, target, should, shadowParent: getOutermostShadowParent(target) }; shouldPreventQueue.current.push(event); setTimeout(() => { @@ -197,3 +197,15 @@ export function RemoveScrollSideCar(props: IRemoveScrollEffectProps) { ); } + +function getOutermostShadowParent(node: Node | null): HTMLElement | null { + let shadowParent: HTMLElement | null = null; + while (node !== window.document && node !== null) { + if (node instanceof ShadowRoot) { + shadowParent = node.host as HTMLElement; + node = node.host; + } + node = node?.parentNode; + } + return shadowParent +} From e634b418503b1bbd1b6d8d416154c3960be071ea Mon Sep 17 00:00:00 2001 From: csorfab Date: Sat, 23 Sep 2023 22:44:30 +0200 Subject: [PATCH 2/3] remove unnecessary optional chaining and equality check --- src/SideEffect.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/SideEffect.tsx b/src/SideEffect.tsx index 269dc50..4ba1650 100644 --- a/src/SideEffect.tsx +++ b/src/SideEffect.tsx @@ -200,12 +200,12 @@ export function RemoveScrollSideCar(props: IRemoveScrollEffectProps) { function getOutermostShadowParent(node: Node | null): HTMLElement | null { let shadowParent: HTMLElement | null = null; - while (node !== window.document && node !== null) { + while (node !== null) { if (node instanceof ShadowRoot) { shadowParent = node.host as HTMLElement; node = node.host; } - node = node?.parentNode; + node = node.parentNode; } return shadowParent } From ff9a8974e72d653b28c3fa56f749f900fa8b6cb1 Mon Sep 17 00:00:00 2001 From: csorfab Date: Tue, 26 Sep 2023 22:58:57 +0200 Subject: [PATCH 3/3] mobile fix --- src/handleScroll.ts | 3 +++ 1 file changed, 3 insertions(+) diff --git a/src/handleScroll.ts b/src/handleScroll.ts index 21581f9..c2bf468 100644 --- a/src/handleScroll.ts +++ b/src/handleScroll.ts @@ -90,6 +90,9 @@ export const handleScroll = ( let availableScrollTop = 0; do { + if (target instanceof ShadowRoot) { + target = target.host as HTMLElement; + } const [position, scroll, capacity] = getScrollVariables(axis, target); const elementScroll = scroll - capacity - directionFactor * position;