Scroll Triggered و Infinite Scroll — بيحصل لما يدخل

const io = new IntersectionObserver(  (entries) => {    for (const entry of entries) {      if (entry.isIntersecting) {        // العنصر دخل      }    }  },  {    root: null,              // null = الشاشة. أو عنصر scroller معيّن    rootMargin: "0px 0px -10% 0px", // كبّر أو صغّر حدود الـ root    threshold: 0.25,         // يتنده لما ربع العنصر يبان  },);io.observe(element);

const io = new IntersectionObserver(  (entries) => {    for (const e of entries) {      if (!e.isIntersecting) continue;      e.target.classList.add("is-in");      io.unobserve(e.target); // مرة واحدة: مش هيختفي لو رجعت لفوق    }  },  { threshold: 0.35 },);document.querySelectorAll(".reveal").forEach((el) => io.observe(el));

.reveal { opacity: 0; transform: translateY(18px); transition: opacity .5s, transform .5s; }.reveal.is-in { opacity: 1; transform: none; }@media (prefers-reduced-motion: reduce) {  .reveal { opacity: 1; transform: none; transition: none; }}

import { useEffect, useRef } from "react";import { useInfiniteQuery } from "@tanstack/react-query";export function InfiniteList() {  const { data, fetchNextPage, hasNextPage, isFetchingNextPage } = useInfiniteQuery({    queryKey: ["posts"],    queryFn: ({ pageParam }) => fetch(`/api/posts?cursor=${pageParam}`).then((r) => r.json()),    initialPageParam: 0,    getNextPageParam: (last) => last.nextCursor ?? undefined,  });  const sentinel = useRef<HTMLDivElement>(null);  useEffect(() => {    const el = sentinel.current;    if (!el) return;    const io = new IntersectionObserver(      ([e]) => {        if (e?.isIntersecting && hasNextPage && !isFetchingNextPage) fetchNextPage();      },      { rootMargin: "0px 0px 400px 0px" }, // ابدأ تجيب قبل الآخر بـ 400px    );    io.observe(el);    return () => io.disconnect();  }, [hasNextPage, isFetchingNextPage, fetchNextPage]);  return (    <>      {data?.pages.flatMap((p) => p.items).map((post) => <article key={post.id}>{post.title}</article>)}      <div ref={sentinel} aria-hidden="true" />      {isFetchingNextPage && <p role="status">بنحمّل…</p>}    </>  );}