Fix scroll for targets with custom scroll parent or fixed position

gilbarbara · Nov 18, 2024 · 3648311 · 3648311
1 parent 9874150
commit 3648311
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 2 deletions.
diff --git a/src/components/Overlay.tsx b/src/components/Overlay.tsx
@@ -63,9 +63,15 @@ export default class JoyrideOverlay extends React.Component<OverlayProps, State>
   }
 
   componentDidUpdate(previousProps: OverlayProps) {
-    const { lifecycle, spotlightClicks } = this.props;
+    const { disableScrollParentFix, lifecycle, spotlightClicks, target } = this.props;
     const { changed } = treeChanges(previousProps, this.props);
 
+    if (changed('target') || changed('disableScrollParentFix')) {
+      const element = getElement(target);
+
+      this.scrollParent = getScrollParent(element ?? document.body, disableScrollParentFix, true);
+    }
+
     if (changed('lifecycle', LIFECYCLE.TOOLTIP)) {
       this.scrollParent?.addEventListener('scroll', this.handleScroll, { passive: true });
 

diff --git a/src/modules/dom.ts b/src/modules/dom.ts
@@ -204,10 +204,16 @@ export function getElementPosition(
   const elementRect = getClientRect(element);
   const parent = getScrollParent(element, skipFix);
   const hasScrollParent = hasCustomScrollParent(element, skipFix);
+  const isFixedTarget = hasPosition(element);
   let parentTop = 0;
   let top = elementRect?.top ?? 0;
 
-  if (parent instanceof HTMLElement) {
+  if (hasScrollParent && isFixedTarget) {
+    const offsetTop = element?.offsetTop ?? 0;
+    const parentScrollTop = (parent as HTMLElement)?.scrollTop ?? 0;
+
+    top = offsetTop - parentScrollTop;
+  } else if (parent instanceof HTMLElement) {
     parentTop = parent.scrollTop;
 
     if (!hasScrollParent && !hasPosition(element)) {