Body Scroll Lock

title: "Body Scroll Lock — Preventing Background Scroll in Modals" description: "Learn how to prevent background page scrolling when a modal is open, ensuring users can scroll the modal content without moving the background." weight: 9 date: 2026-06-28 lastmod: 2026-06-28 tags: [accessibility, modals]

Body scroll lock prevents the background page from scrolling when a modal is open, allowing users to scroll the modal content without losing their position.

## What You'll Learn

How to lock body scroll, handle scroll position restoration, and deal with iOS Safari's unique scrolling behavior.

## Why It Matters

Without scroll lock, scrolling inside a modal scrolls the background page, disorienting users and potentially hiding the modal behind the viewport edge.

## Real-World Use

A user opens a long settings modal with many options. They scroll down through the settings. The background page stays fixed. Only the modal content scrolls.

## Body Scroll Lock

```javascript
let scrollPosition = 0;

function lockScroll() {
  scrollPosition = window.scrollY;
  document.body.style.overflow = 'hidden';
  document.body.style.position = 'fixed';
  document.body.style.top = `-${scrollPosition}px`;
  document.body.style.width = '100%';
}

function unlockScroll() {
  document.body.style.overflow = '';
  document.body.style.position = '';
  document.body.style.top = '';
  document.body.style.width = '';
  window.scrollTo(0, scrollPosition);
}

CSS Approach

body.modal-open {
  overflow: hidden;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
}

Touchmove Prevention

// Prevent touch scrolling on iOS
function preventTouchScroll(e) {
  if (!e.target.closest('.modal-content')) {
    e.preventDefault();
  }
}

modalOverlay.addEventListener('touchmove', preventTouchScroll, { passive: false });

Common Mistakes

1. Scroll position jumps on unlock

Save scrollY before locking and restore it after unlocking to prevent position jumps.

2. iOS Safari ignores overflow:hidden

iOS Safari needs position:fixed in addition to overflow:hidden to prevent body scroll.

3. Padding change due to scrollbar removal

When overflow:hidden removes the scrollbar, the page width changes. Add padding-right to compensate.

4. Scroll lock not removed on close

Always unlock scroll when the modal closes, including on Escape and backdrop click.

5. Touch scrolling leaks to body

On mobile, scrolling inside the modal can scroll the body. Prevent touchmove on the overlay.

Practice Questions

1. Why does body scroll need to be locked when a modal is open? To prevent the background page from scrolling, which would disorient the user and potentially hide the modal.

2. What CSS properties lock body scroll? overflow: hidden on the body element, combined with position: fixed for iOS.

3. Why does iOS Safari need special handling? iOS Safari ignores overflow:hidden on body. position:fixed is required to prevent body scrolling.

Challenge: Implement scroll lock for a modal with scrollable content. Verify on iOS Safari that the background does not scroll.

FAQ

Mini Project

Create a modal with scrollable content. Implement body scroll lock with iOS Safari support. Test on desktop and mobile browsers.

What's Next

Learn about the Inert Backdrop and how the inert attribute makes background content non-interactive.