[intersection action] Use closest scrollable parent/ancestor for InterSectionObserver root or null to use viewport (#463)

techniq · web-flow · commit 1ffa403dc2fc · 2024-08-14T15:09:56.000-04:00
diff --git a/.changeset/fifty-mirrors-wink.md b/.changeset/fifty-mirrors-wink.md
@@ -0,0 +1,5 @@
+---
+'svelte-ux': patch
+---
+
+[intersection action] Use closest scrollable parent/ancestor for InterSectionObserver root or `null` to use viewport
diff --git a/packages/svelte-ux/src/lib/actions/observer.ts b/packages/svelte-ux/src/lib/actions/observer.ts
@@ -1,3 +1,4 @@
+import { getScrollParent } from '$lib/utils/dom.js';
 import type { Action } from 'svelte/action';
 
 export const resize: Action<Element, ResizeObserverOptions | undefined> = (node, options) => {
@@ -15,23 +16,20 @@ export const resize: Action<Element, ResizeObserverOptions | undefined> = (node,
   };
 };
 
-export const intersection: Action<Element, IntersectionObserverInit | undefined> = (
+export const intersection: Action<HTMLElement, IntersectionObserverInit | undefined> = (
   node,
   options = {}
 ) => {
-  // TODO: Support defininting `options.root = node.parentNode` easily (maybe querySelector() string?)
+  const scrollParent = getScrollParent(node);
+  // Use viewport (null) if scrollParent = `<body>`
+  const root = scrollParent === document.body ? null : scrollParent;
 
   let observer = new IntersectionObserver(
     (entries, observer) => {
       const entry = entries[0];
       node.dispatchEvent(new CustomEvent('intersecting', { detail: entry }));
-      // if (entry.intersectionRatio > 0) {
-      //   node.dispatchEvent(new CustomEvent('visible', { detail: entry }));
-      // } else {
-      //   node.dispatchEvent(new CustomEvent('invisible', { detail: entry }));
-      // }
     },
-    { root: node.parentElement, ...options }
+    { root, ...options }
   );
   observer.observe(node);
 
diff --git a/packages/svelte-ux/src/routes/docs/components/InfiniteScroll/+page.svelte b/packages/svelte-ux/src/routes/docs/components/InfiniteScroll/+page.svelte
@@ -32,3 +32,13 @@
     </InfiniteScroll>
   </div>
 </Preview>
+
+<h2>Viewport root (no overflown parent/ancestor)</h2>
+
+<Preview>
+  <InfiniteScroll {items} let:visibleItems>
+    {#each visibleItems as item}
+      <ListItem title={item.name} />
+    {/each}
+  </InfiniteScroll>
+</Preview>

-Original file line number
+Diff line change
@@ @@ -0,0 +1,5 @@ @@
 +---
 +'svelte-ux': patch
 +---
++
 +[intersection action] Use closest scrollable parent/ancestor for InterSectionObserver root or `null` to use viewport