Browse Source

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
master
Muthu Kumar 3 weeks ago
parent
commit
78dc3c05d8
Failed to extract signature
  1. 2
      src/components/Container.tsx
  2. 3
      src/components/Exp/Story.tsx

2
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 Logo } from "../assets/logo.svg";
import { ReactComponent as Right } from "../assets/arrow-right.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 Menu, { MenuEntries, MenuPaths } from "./Menu";
import useMediaQuery from "../util/useMediaQuery"; import useMediaQuery from "../util/useMediaQuery";
import { AnimateEntry } from "./AnimateEntry"; import { AnimateEntry } from "./AnimateEntry";

3
src/components/Exp/Story.tsx

@ -185,7 +185,8 @@ export const Story = ({ title, description, logo, active }: Experience) => {
const ref = useRef<HTMLDivElement>(null); const ref = useRef<HTMLDivElement>(null);
useEffect(() => { useEffect(() => {
if (active) setTimeout(() => ref.current?.scrollIntoView(true), 300); if (active)
setTimeout(() => ref.current?.scrollIntoView({ block: "end" }), 300);
}, [active]); }, [active]);
return ( return (

Loading…
Cancel
Save