feat: 灯箱支持下载、底部缩略图居中、关闭后保留滚动位置
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
@@ -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);
|
||||||
|
|||||||
Reference in New Issue
Block a user