feat: 灯箱支持下载、底部缩略图居中、关闭后保留滚动位置

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
TerryM
2026-05-29 18:11:30 +08:00
parent e04dd7dc2a
commit 042635528a

View File

@@ -147,7 +147,8 @@ function Filmstrip({
className="shrink-0 bg-gradient-to-t from-black/90 to-transparent pb-[max(env(safe-area-inset-bottom),0.75rem)] pt-3" className="shrink-0 bg-gradient-to-t from-black/90 to-transparent pb-[max(env(safe-area-inset-bottom),0.75rem)] pt-3"
onClick={(e) => e.stopPropagation()} onClick={(e) => e.stopPropagation()}
> >
<div className="mx-auto flex max-w-[920px] gap-2 overflow-x-auto px-4 [-ms-overflow-style:none] [scrollbar-width:none] [&::-webkit-scrollbar]:hidden"> <div className="overflow-x-auto px-4 [-ms-overflow-style:none] [scrollbar-width:none] [&::-webkit-scrollbar]:hidden">
<div className="mx-auto flex w-fit max-w-[920px] gap-2">
{images.map((image, i) => { {images.map((image, i) => {
const active = i === index; const active = i === index;
return ( return (
@@ -177,6 +178,7 @@ function Filmstrip({
})} })}
</div> </div>
</div> </div>
</div>
); );
} }
@@ -213,13 +215,21 @@ function LightboxView({
if (e.key === "ArrowRight") goNext(); if (e.key === "ArrowRight") goNext();
}; };
window.addEventListener("keydown", onKey); window.addEventListener("keydown", onKey);
return () => window.removeEventListener("keydown", onKey);
}, [goPrev, goNext, onClose]);
// Lock background scroll while the lightbox is open, then restore the exact
// scroll position on close — otherwise dismissing the overlay leaves the page
// scrolled back to the top instead of where the user was reading.
useEffect(() => {
const scrollY = window.scrollY;
const prevOverflow = document.body.style.overflow; const prevOverflow = document.body.style.overflow;
document.body.style.overflow = "hidden"; document.body.style.overflow = "hidden";
return () => { return () => {
window.removeEventListener("keydown", onKey);
document.body.style.overflow = prevOverflow; document.body.style.overflow = prevOverflow;
window.scrollTo(0, scrollY);
}; };
}, [goPrev, goNext, onClose]); }, []);
useEffect(() => { useEffect(() => {
setIsCaptionVisible(true); setIsCaptionVisible(true);