Function HomeIndexContent

src/Components/Home/home.jsx:94–239

()

}

function HomeIndexContent() {
    const [pageIndex, setPageIndex] = useState(0);
    const contentRef = useRef(null);
    const pageIndexRef = useRef(0);

    // the landing is a fixed full-screen snap experience — lock document scroll
    // while it's mounted so the sticky top bar can never be dragged by a gesture
    useEffect(() => {
        const html = document.documentElement;
        const prevHtml = html.style.overflow;
        const prevBody = document.body.style.overflow;
        // reset any scroll carried over from the previous page before locking,
        // otherwise the frozen offset would clip the sticky top bar
        window.scrollTo(0, 0);
        html.style.overflow = 'hidden';
        document.body.style.overflow = 'hidden';
        return () => {
            html.style.overflow = prevHtml;
            document.body.style.overflow = prevBody;
        };
    }, []);

    // keep the ref in sync for the imperative scroll handlers, and start each
    // newly-shown screen at the top
    useEffect(() => {
        pageIndexRef.current = pageIndex;
        const screen = contentRef.current?.firstElementChild?.children[pageIndex];
        if (screen) screen.scrollTop = 0;
    }, [pageIndex]);

    useEffect(() => {
        const node = contentRef.current;
        let lock = false;
        // One gesture = one page change. The lock absorbs trackpad inertia
        // (which fires a burst of +/- deltas) so the page can't flip-flop.
        const go = (dir) => {
            if (lock) return;
            setPageIndex((cur) => {
                const next = Math.min(Math.max(cur + (dir > 0 ? 1 : -1), 0), PAGE_COUNT - 1);
                if (cur === next) return cur;
                lock = true;
                setTimeout(() => {
                    lock = false;
                }, 1000);
                return next;
            });
        };
        // when the active screen's own content overflows, let it scroll natively
        // until it hits the edge — only then do we snap to the next/prev screen
        const canScrollWithin = (dir) => {
            const screen = node.firstElementChild?.children[pageIndexRef.current];
            if (!screen) return false;
            const {scrollTop, scrollHeight, clientHeight} = screen;
            if (scrollHeight - clientHeight <= 2) return false;
            return dir > 0 ? scrollTop + clientHeight < scrollHeight - 2 : scrollTop > 2;
        };
        const onWheel = (e) => {
            if (Math.abs(e.deltaY) < 8) return;