How can you prevent the background from scrolling when a modal is open?
Preventing background scroll using CSS
You can stop the background content from scrolling when a modal is open by applying overflow: hidden to the <body> or <html> element. This disables page scrolling while allowing the modal itself to remain visible and interactable.
Key CSS Technique
Apply
overflow: hiddento the<body>when the modal is active.Remove or unset it when the modal is closed to restore scrolling.
Ensure the modal uses
position: fixedso it stays in place while the page is locked.
Example: Prevent background scroll with CSS