chuckdries/Personal-Website
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

scroll works but is jank in chrome

Browse Source
This commit is contained in:
Chuck Dries 2023-03-08 01:24:28 -08:00
parent d55c29e24a
commit 77df8418c8
1 changed files with 10 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
src/pages/photogallery.tsx
View File

@ -110,7 +110,7 @@ const GalleryPage = ({ data, location }: PageProps<Queries.GalleryPageQueryQuery
}, []); }, []);
const scrollIntoView = React.useCallback(() => { const scrollIntoView = React.useCallback(() => {
if (!hash || hash.startsWith('all')) { if (!hash) {
return; return;
} }
const el = document.getElementById(hash); const el = document.getElementById(hash);
@ -118,7 +118,7 @@ const GalleryPage = ({ data, location }: PageProps<Queries.GalleryPageQueryQuery
return; return;
} }
el.scrollIntoView({ el.scrollIntoView({
block: "center", block: hash.startsWith('all') ? "start" : "center",
}); });
window.addEventListener("wheel", removeHash); window.addEventListener("wheel", removeHash);
}, [hash, removeHash]); }, [hash, removeHash]);
@ -142,7 +142,7 @@ const GalleryPage = ({ data, location }: PageProps<Queries.GalleryPageQueryQuery
setTimeout(() => { setTimeout(() => {
// don't scroll into view if user got here with back button // don't scroll into view if user got here with back button
scrollIntoView(); scrollIntoView();
}, 100); }, 0);
}, [setSortKey, setKeyword, scrollIntoView, location]); }, [setSortKey, setKeyword, scrollIntoView, location]);
const images: GalleryImage[] = React.useMemo(() => { const images: GalleryImage[] = React.useMemo(() => {
@ -224,10 +224,10 @@ const GalleryPage = ({ data, location }: PageProps<Queries.GalleryPageQueryQuery
{sortKey !== "datePublished" && ( {sortKey !== "datePublished" && (
<Link <Link
className="underline cursor-pointer text-gray-500" className="underline cursor-pointer text-gray-500"
onClick={(e) => { // onClick={(e) => {
// e.preventDefault(); // // e.preventDefault();
// setSortKey("datePublished") // // setSortKey("datePublished")
}} // }}
to="?sort=datePublished#all" to="?sort=datePublished#all"
> >
show more show more
@ -264,9 +264,9 @@ const GalleryPage = ({ data, location }: PageProps<Queries.GalleryPageQueryQuery
"landscape", "landscape",
"flowers", "flowers",
"product", "product",
"waterfall", // "waterfall",
"fireworks", // "fireworks",
"panoramic", // "panoramic",
"Portland Japanese Garden", "Portland Japanese Garden",
// "shoot the light", // "shoot the light",
// "sunset", // "sunset",