diff --git a/src/components/robotics/CategoryShowcaseScroll.tsx b/src/components/robotics/CategoryShowcaseScroll.tsx index 0b3e7fd..65bd2f3 100644 --- a/src/components/robotics/CategoryShowcaseScroll.tsx +++ b/src/components/robotics/CategoryShowcaseScroll.tsx @@ -1,6 +1,6 @@ 'use client'; -import { useRef, useEffect, useState } from 'react'; +import { useRef, useEffect, useState, useCallback } from 'react'; import Image from 'next/image'; import Link from 'next/link'; import { motion, useScroll, useTransform } from 'framer-motion'; @@ -157,9 +157,12 @@ function CategorySticky() { offset: ['start start', 'end end'], }); const [activeIdx, setActiveIdx] = useState(0); + const manualLockUntil = useRef(0); useEffect(() => { return scrollYProgress.on('change', (v) => { + /* honor manual click for a short window so scroll doesn't override */ + if (Date.now() < manualLockUntil.current) return; const idx = Math.min( CATEGORIES.length - 1, Math.max(0, Math.floor(v * CATEGORIES.length)) @@ -168,6 +171,12 @@ function CategorySticky() { }); }, [scrollYProgress]); + const handlePick = useCallback((i: number) => { + /* swap in place, no scroll. Lock scroll listener for 1.2s. */ + manualLockUntil.current = Date.now() + 1200; + setActiveIdx(i); + }, []); + /* progress bar height */ const progressHeight = useTransform(scrollYProgress, [0, 1], ['0%', '100%']); @@ -176,17 +185,16 @@ function CategorySticky() { ref={containerRef} style={{ position: 'relative', - /* 65vh per category — total ~520vh feels responsive, not endless */ - height: `${CATEGORIES.length * 65}vh`, + /* ~50vh per category scroll budget on top of sticky height */ + height: `calc(100svh + ${CATEGORIES.length * 50}vh)`, }} >
{ - const el = containerRef.current; - if (!el) return; - const rect = el.getBoundingClientRect(); - const targetY = window.scrollY + rect.top + (rect.height * (i + 0.5)) / CATEGORIES.length; - window.scrollTo({ top: targetY - window.innerHeight / 2, behavior: 'smooth' }); - }} + onClick={() => handlePick(i)} style={{ display: 'flex', alignItems: 'center',