aknuth/wm-projekt
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

scrolling fixes

Browse Source
This commit is contained in:
Andreas Knuth
2026-07-02 17:51:59 -05:00
parent d6a026287a
commit 8c639a83a9
2 changed files with 21 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
app/[locale]/components/KoFixtures.tsx
View File

@@ -82,22 +82,31 @@ export default function KoFixtures({ teams, matches, dict, locale }: { teams: Te
return upcoming?.id ?? null; return upcoming?.id ?? null;
}, [koMatches]); }, [koMatches]);
const targetRef = useRef<HTMLDivElement>(null); // Scroll-Ziel: aktueller Tag (heute, oder nächster Spieltag bei Ruhetag)
const targetDateKey = useMemo(() => {
const todayKey = localDateKey(new Date().toISOString());
const dayKeys = groups.map(([key]) => key);
if (dayKeys.includes(todayKey)) return todayKey;
const future = dayKeys.find(k => k >= todayKey);
return future ?? dayKeys[dayKeys.length - 1] ?? null;
}, [groups]);
const targetDateRef = useRef<HTMLHeadingElement>(null);
const hasScrolledRef = useRef<string | null>(null); const hasScrolledRef = useRef<string | null>(null);
useEffect(() => { useEffect(() => {
if (!mounted || !targetRef.current) return; if (!mounted || !targetDateRef.current) return;
if (targetMatchId === hasScrolledRef.current) return; if (targetDateKey === hasScrolledRef.current) return;
const el = targetRef.current; const el = targetDateRef.current;
const raf = requestAnimationFrame(() => { const raf = requestAnimationFrame(() => {
const rect = el.getBoundingClientRect(); const rect = el.getBoundingClientRect();
const absoluteTop = rect.top + window.scrollY; const absoluteTop = rect.top + window.scrollY;
const offset = 180; const offset = 180;
window.scrollTo({ top: Math.max(0, absoluteTop - offset), behavior: "smooth" }); window.scrollTo({ top: Math.max(0, absoluteTop - offset), behavior: "smooth" });
}); });
hasScrolledRef.current = targetMatchId; hasScrolledRef.current = targetDateKey;
return () => cancelAnimationFrame(raf); return () => cancelAnimationFrame(raf);
}, [mounted, targetMatchId, koMatches.length]); }, [mounted, targetDateKey, koMatches.length]);
const [showScrollTop, setShowScrollTop] = useState(false); const [showScrollTop, setShowScrollTop] = useState(false);
useEffect(() => { useEffect(() => {
@@ -116,7 +125,7 @@ export default function KoFixtures({ teams, matches, dict, locale }: { teams: Te
<div> <div>
{groups.map(([date, groupMatches]) => ( {groups.map(([date, groupMatches]) => (
<div key={date} style={{ marginBottom: 24 }}> <div key={date} style={{ marginBottom: 24 }}>
<h3 style={{ <h3 ref={date === targetDateKey ? targetDateRef : undefined} style={{
fontFamily: "var(--font-display)", fontSize: 13, fontFamily: "var(--font-display)", fontSize: 13,
textTransform: "uppercase", letterSpacing: "0.06em", textTransform: "uppercase", letterSpacing: "0.06em",
color: "var(--ink-dim)", margin: "0 0 10px", color: "var(--ink-dim)", margin: "0 0 10px",
@@ -140,7 +149,6 @@ export default function KoFixtures({ teams, matches, dict, locale }: { teams: Te
return ( return (
<div <div
key={m.id} key={m.id}
ref={isTarget ? targetRef : undefined}
style={{ style={{
background: "var(--bg-card)", background: "var(--bg-card)",
border: `${isTarget ? 2 : 1}px solid ${live ? "var(--turf)" : isTarget ? "var(--turf)" : "var(--line-soft)"}`, border: `${isTarget ? 2 : 1}px solid ${live ? "var(--turf)" : isTarget ? "var(--turf)" : "var(--line-soft)"}`,

5
app/[locale]/page.tsx
View File

@@ -60,6 +60,11 @@ export default function Home({ params }: { params: Promise<{ locale: string }> }
setTab("groupfixtures"); setTab("groupfixtures");
}, []); }, []);
// Tab-Wechsel: nach ganz oben scrollen
useEffect(() => {
window.scrollTo({ top: 0, behavior: "auto" });
}, [tab]);
const anyLive = data?.matches.some( const anyLive = data?.matches.some(
(m) => m.status === "LIVE" || m.status === "IN_PLAY" || m.status === "PAUSED", (m) => m.status === "LIVE" || m.status === "IN_PLAY" || m.status === "PAUSED",
); );