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
Failed to extract signature
2 changed files with
3 additions and
2 deletions
-
src/components/Container.tsx
-
src/components/Exp/Story.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"; |
|
|
|
@ -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 ( |
|
|