Prevent scrolling on the underlying page when the image lightbox is open
Disable body scrolling and touch move events when the image lightbox is active to prevent the background page from scrolling. Replit-Commit-Author: Agent Replit-Commit-Session-Id: 23852c00-4779-460a-9e0c-d09fee4b6c92 Replit-Commit-Checkpoint-Type: full_checkpoint Replit-Commit-Event-Id: 13ff6865-3caa-4778-a4a6-edf3608199e7 Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/f209e72a-0939-48fa-84fc-57854de71967/23852c00-4779-460a-9e0c-d09fee4b6c92/ncMMRQ9 Replit-Helium-Checkpoint-Created: true
This commit is contained in:
parent
cc0a4682c6
commit
a1dd9a1414
@ -84,12 +84,19 @@ function Lightbox({
|
||||
return () => window.removeEventListener("keydown", handler);
|
||||
}, [onClose, prev, next]);
|
||||
|
||||
useEffect(() => {
|
||||
const orig = document.body.style.overflow;
|
||||
document.body.style.overflow = "hidden";
|
||||
return () => { document.body.style.overflow = orig; };
|
||||
}, []);
|
||||
|
||||
const current = images[index];
|
||||
|
||||
return (
|
||||
<div
|
||||
className="fixed inset-0 z-50 bg-black/95 flex items-center justify-center"
|
||||
onClick={onClose}
|
||||
onTouchMove={(e) => e.preventDefault()}
|
||||
data-testid="lightbox-overlay"
|
||||
>
|
||||
<button
|
||||
|
||||
Loading…
Reference in New Issue
Block a user