Prevent Body Scrolling When The User Scrolls On Fixed Position Div

Every web developer has encountered this frustrating scenario: you open a modal or fixed-position overlay, scroll through its content, and suddenly the background page starts scrolling too. This "background scrolling" behavior breaks user immersion and creates a confusing interface where users lose their place on the page.

Preventing body scrolling when users interact with fixed position elements is a fundamental yet surprisingly complex aspect of building polished user interfaces. This guide covers the problem, solutions, and best practices for creating scroll-safe overlays.

For teams building complex interfaces with multiple interactive components, proper scroll management is essential for maintaining a professional user experience. Our web development services team specializes in implementing robust interaction patterns that work seamlessly across all devices.

The Problem: Why Background Scrolling Happens

The core issue stems from how browsers handle scroll propagation in layered interfaces. When you open a modal dialog, side drawer, or any fixed-position overlay, users expect to scroll only within that overlay's content boundaries.

However, browsers don't inherently understand that scroll gestures should be contained within your overlay element. The scroll event bubbles up through the DOM and affects the underlying document, causing what developers call "scroll chaining" or "scroll bleeding."

Mobile Challenges

On iOS Safari specifically, the browser's momentum scrolling and rubber-banding effects can cause the background to continue moving even after the user has scrolled to the end of your overlay content. The result is a jarring experience where users suddenly find themselves at a different position on the underlying page.

Real-World Impact

• Checkout flows: Users lose their cart position or accidentally submit duplicate orders
• Content applications: Readers lose their place in long articles
• E-commerce: Shoppers trying to view product details in modals scroll the entire page instead

Implementing proper scroll blocking is a hallmark of professional UI/UX design. Learn more about creating seamless user experiences through our UI/UX design services that prioritize user attention and interface clarity.

CSS-Only Solutions

Using overflow: hidden

The most straightforward approach is applying overflow: hidden to the body when an overlay opens:

body.scroll-locked {
 overflow: hidden;
}

Limitation: On older iOS versions (prior to iOS 16.3), overflow: hidden on the body doesn't reliably prevent scrolling.

The overscroll-behavior Property

Modern browsers (Chrome 144+) offer the overscroll-behavior property with a contain value:

.dialog-overlay {
 overscroll-behavior: contain;
}

body {
 overscroll-behavior: contain;
}

This creates a boundary that prevents scroll chains from crossing between layers. The advantage is purely declarative markup without JavaScript.

When building modern interfaces, combining CSS scroll containment with well-structured HTML creates robust solutions. Our web development team can help implement these patterns in your project.

The Position: Fixed Technique

One of the most reliable cross-browser solutions involves temporarily changing the body's positioning to fixed when an overlay opens:

let scrollPosition = 0;

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

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

Why It Works

The negative top offset preserves visual position while the element is fixed. When closing the overlay, scrolling back to the saved position creates a seamless transition. This approach works universally across all browsers, including older iOS versions.

Edge Cases

• Window resizing during overlay open may require recalculating offsets
• Device orientation changes on mobile need similar handling
• Test with accessibility tools and zoom settings

JavaScript Libraries and Packages

body-scroll-lock Package

For projects requiring broad browser support, the body-scroll-lock package provides a battle-tested solution:

import { disableBodyScroll, enableBodyScroll } from 'body-scroll-lock';

const overlayElement = document.querySelector('.overlay');

// Disable body scroll when overlay opens
disableBodyScroll(overlayElement);

// Enable body scroll when overlay closes
enableBodyScroll(overlayElement);

With over 700,000 weekly downloads, this library handles complex edge cases across different browsers and devices.

React: react-scroll-blocking-layers

For React applications, this package provides a hooks-based API:

import { useLayer } from 'react-scroll-blocking-layers';

function ModalComponent() {
 const [isOpen, setIsOpen] = useLayer();

 return (
 <>
 <button onClick={() => setIsOpen(true)}>Open Modal</button>
 {isOpen && <div className="modal">...</div>}
 </>
 );
}

For teams building React-based applications, leveraging established libraries ensures consistent behavior across different browsers and devices. Our web development services include implementation of robust component libraries and interaction patterns.

Modern CSS with :has() Selector

The CSS :has() pseudo-class enables declarative scroll locking:

body:has(.overlay[aria-hidden="false"]) {
 overflow: hidden;
}

When an overlay is visible, the body automatically receives overflow: hidden. This declarative approach keeps styles and markup synchronized.

Combined Approach

body:has(.overlay[aria-hidden="false"]) {
 overflow: hidden;
 overscroll-behavior: contain;
}

Browser support: :has() now has excellent support in modern browsers. Legacy browser support may require fallback JavaScript.

Accessibility Considerations

Scroll blocking interfaces must maintain accessibility:

Focus Management

• Move focus to the overlay when it opens
• Prevent focus from leaving the overlay via Tab key
• Return focus to the trigger element when the overlay closes
• Ensure Escape key closes the overlay

ARIA Attributes

• Use aria-modal="true" on the overlay
• Use aria-hidden to indicate visibility state
• Communicate overlay presence to assistive technologies

Reduced Motion

Consider users with prefers-reduced-motion enabled. Reduce or eliminate scroll blocking animations for these users.

Building accessible interfaces is a core principle of our UI/UX design services. We ensure every interaction pattern we implement meets accessibility standards and provides equal access for all users.

Best Practices and Implementation Guide

Recommended Approaches

For modern browsers (2024+): Use :has() selector with CSS overflow: hidden and overscroll-behavior: contain.

For broad browser support: Implement the position:fixed technique with scroll position restoration.

For React applications: Use react-scroll-blocking-layers for integrated hook-based API.

Testing Checklist

• Test on actual iOS devices
• Test across multiple screen sizes and orientations
• Verify pinch-to-zoom and accessibility features
• Test keyboard navigation and focus trapping
• Test with screen readers
• Verify reduced motion preferences are respected

Partner with our team to implement these best practices in your projects. Our web development services include comprehensive testing and quality assurance to ensure flawless scroll interactions across all devices.

Sources

• CSS-Tricks - Prevent a page from scrolling while a dialog is open
• Robin Weser - Scroll Blocking Overlays
• Jay Freestone - Locking body scroll for modals on iOS
• MDN Web Docs - overscroll-behavior
• body-scroll-lock npm package
• react-scroll-blocking-layers