From 78dc3c05d843c804e30e8287adbd291491599b0a Mon Sep 17 00:00:00 2001 From: Muthu Kumar Date: Fri, 11 Apr 2025 15:59:04 +0530 Subject: [PATCH] fix: for some reason scrollIntoView block: "start" is buggy but "end" is fine scrollIntoView(true) caused the top of the page to get pushed up and get cut off (??), consistently on Firefox and Chrome --- src/components/Container.tsx | 2 +- src/components/Exp/Story.tsx | 3 ++- 2 files changed, 3 insertions(+), 2 deletions(-) diff --git a/src/components/Container.tsx b/src/components/Container.tsx index b4e82b4..5585f90 100644 --- a/src/components/Container.tsx +++ b/src/components/Container.tsx @@ -4,7 +4,7 @@ import useLocation from "wouter/use-location"; import { ReactComponent as Logo } from "../assets/logo.svg"; import { ReactComponent as Right } from "../assets/arrow-right.svg"; -import { getTimeout, useToggle } from "../util"; +import { getTimeout } from "../util"; import Menu, { MenuEntries, MenuPaths } from "./Menu"; import useMediaQuery from "../util/useMediaQuery"; import { AnimateEntry } from "./AnimateEntry"; diff --git a/src/components/Exp/Story.tsx b/src/components/Exp/Story.tsx index 37a1da1..8588e97 100644 --- a/src/components/Exp/Story.tsx +++ b/src/components/Exp/Story.tsx @@ -185,7 +185,8 @@ export const Story = ({ title, description, logo, active }: Experience) => { const ref = useRef(null); useEffect(() => { - if (active) setTimeout(() => ref.current?.scrollIntoView(true), 300); + if (active) + setTimeout(() => ref.current?.scrollIntoView({ block: "end" }), 300); }, [active]); return (