feat(intersect): scrolling direction detection

Author: vnphanquang

.changeset/few-carrots-tell.md

@@ -0,0 +1,5 @@
+---
+'@svelte-put/intersect': patch
+---
+
+Support the `direction` property in `event.detail` for scrolling direction detection

packages/actions/intersect/src/intersect.ts

@@ -104,19 +104,25 @@ declare global {
  */
 export function intersect(node: HTMLElement, parameters: IntersectParameters = { enabled: true }) {
   let hasIntersect = false;
+  let previousY = 0;
+
   let { root, rootMargin, threshold, enabled = true } = parameters;
   const callback: IntersectionObserverCallback = (entries, observer) => {
+    const y = entries[0].boundingClientRect.y ?? 0;
     if (entries.some((e) => !!e.intersectionRatio)) {
+      const direction = y < previousY ? 'down' : 'up';
       const detail: IntersectDetail = {
         observer,
         entries,
+        direction,
       };
       node.dispatchEvent(new CustomEvent('intersect', { detail }));
       if (!hasIntersect && entries.some((e) => e.isIntersecting)) {
         node.dispatchEvent(new CustomEvent('intersectonce', { detail }));
         hasIntersect = true;
       }
     }
+    previousY = y;
   };
 
   let observer = new IntersectionObserver(callback, {

packages/actions/intersect/src/intersect.types.ts

@@ -47,4 +47,6 @@ export interface IntersectDetail {
   readonly observer: IntersectionObserver;
   /** list of IntersectionObserverEntry passed from IntersectionObserver callback */
   readonly entries: IntersectionObserverEntry[];
+  /** scrolling direction */
+  readonly direction: 'up' | 'down';
 }