🛑 Freeze The Page When A Modal Opens

When a modal appears the user switches to a single task: confirm an action, fill in a form, read a warning. If the background keeps scrolling, confusion creeps in. Closing the modal suddenly drops the person somewhere else on the page — context lost.

Ten reasons to lock scroll beneath a modal

Position stays intact. Users return to the exact spot where the modal was triggered.
Focus stays inside. A still background keeps attention on the job at hand.
No optical drift. Moving content under translucent layers makes the modal look misaligned.
Mobile gestures behave. Locking prevents accidental background scroll while swiping inside the modal.
Keyboard focus remains sane. Tab will not escape into hidden elements behind the dialog.
Accessibility improves. Screen-reader and keyboard users understand they are inside a contained flow.
Analytics stay clean. No fake “scroll” events when the user actually interacts with the modal.
Transitions feel predictable. After closing, people see the same content rather than a random section below.
Rendering stays light. Frozen backgrounds avoid needless repaints in heavy feeds or tables.
It signals quality. Predictable modals make the product feel polished and trustworthy.

Implementation checklist

Toggle a class on body when the modal opens (overflow: hidden;) and remove it on close.
On mobile, store scroll position and switch the body to position: fixed; top: -scrollY;, then restore the value afterwards.
Rely on battle-tested helpers such as body-scroll-lock or react-remove-scroll to handle touch edge cases.
Add automated tests: open modal → lock scroll → close modal → confirm page offset is restored.

Takeaway

Scroll locking is a basic hygiene rule. It keeps users oriented, lowers support load, and lifts confidence in the product. If any modal in your app still lets the background move, fix it today — people will notice.