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 10 months 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