Comprehensive Guide to Disabling Body Scrolling: From Basic CSS to Cross-Browser Solutions

Background of Scroll Disabling Requirements

In modern web development, disabling page scrolling is a common requirement scenario. When users need to focus on specific interface elements, such as modal dialogs, full-screen task interfaces, or guided tutorials, preventing background page scrolling provides a better user experience. However, different browsers have varying support for scroll control, particularly mobile Safari browsers exhibit special behaviors, presenting technical challenges for developers.

Analysis of Basic CSS Methods

The most direct approach to disable scrolling involves using CSS properties. The overflow: hidden property can hide scrollbars and prevent scrolling, but in some browsers it may not completely disable touch scrolling functionality. The position: fixed method effectively disables scrolling but causes the page to jump to the top, which is unacceptable in scenarios requiring maintenance of the current scroll position.

Best Practice Solution

Through practical verification, the most reliable solution involves setting styles for both html and body elements simultaneously:

html, body {
    margin: 0;
    height: 100%;
    overflow: hidden;
}

This solution fundamentally prevents scrolling possibilities by restricting document height to the viewport range and hiding overflow content. The margin: 0 setting ensures layout consistency, avoiding impacts from default margins.

Special Handling for Mobile Safari

Mobile Safari browsers have limitations in supporting overflow: hidden, as users can still scroll through touch gestures. This requires supplementation through JavaScript event handling:

document.addEventListener('touchmove', function(event) {
    if (!event.target.closest('.scrollable-element')) {
        event.preventDefault();
    }
}, { passive: false });

This code prevents all touch scroll events except for specific scrollable elements, ensuring the main page remains fixed.

Scrollbar Gap Management

After disabling scrollbars, page width changes, causing content jumping. This requires calculating scrollbar width and providing compensation:

function getScrollbarWidth() {
    return window.innerWidth - document.documentElement.clientWidth;
}

const scrollbarWidth = getScrollbarWidth();
document.body.style.paddingRight = `${scrollbarWidth}px`;

By dynamically setting padding-right, page layout stability can be maintained, avoiding visual jumps.

Complete Implementation Example

The following provides a complete scroll disabling implementation combining CSS and JavaScript:

class ScrollLock {
    constructor() {
        this.locked = false;
        this.scrollbarWidth = 0;
        this.initialBodyPadding = '';
    }
    
    enable() {
        if (this.locked) return;
        
        // Save initial state
        this.scrollbarWidth = getScrollbarWidth();
        this.initialBodyPadding = document.body.style.paddingRight;
        
        // Apply CSS locking
        document.documentElement.style.overflow = 'hidden';
        document.body.style.overflow = 'hidden';
        document.body.style.paddingRight = `${this.scrollbarWidth}px`;
        
        // Add event listeners
        this.addEventListeners();
        this.locked = true;
    }
    
    disable() {
        if (!this.locked) return;
        
        // Restore initial state
        document.documentElement.style.overflow = '';
        document.body.style.overflow = '';
        document.body.style.paddingRight = this.initialBodyPadding;
        
        // Remove event listeners
        this.removeEventListeners();
        this.locked = false;
    }
    
    addEventListeners() {
        document.addEventListener('touchmove', this.preventTouch, { passive: false });
        document.addEventListener('wheel', this.preventWheel, { passive: false });
    }
    
    removeEventListeners() {
        document.removeEventListener('touchmove', this.preventTouch);
        document.removeEventListener('wheel', this.preventWheel);
    }
    
    preventTouch = (event) => {
        if (!event.target.closest('.allow-scroll')) {
            event.preventDefault();
        }
    }
    
    preventWheel = (event) => {
        if (!event.target.closest('.allow-scroll')) {
            event.preventDefault();
        }
    }
}

// Utility function
function getScrollbarWidth() {
    const outer = document.createElement('div');
    outer.style.visibility = 'hidden';
    outer.style.overflow = 'scroll';
    document.body.appendChild(outer);
    
    const inner = document.createElement('div');
    outer.appendChild(inner);
    
    const scrollbarWidth = outer.offsetWidth - inner.offsetWidth;
    
    outer.parentNode.removeChild(outer);
    return scrollbarWidth;
}

Third-Party Library Recommendations

For complex application scenarios, mature third-party libraries are recommended: body-scroll-lock provides compact solutions supporting internal scrollable elements; scroll-lock supports nested scroll containers and high configurability; react-scroll-locky is specifically designed for React applications, supporting nested locking and React Portals. These libraries are thoroughly tested and capable of handling various edge cases.

Best Practice Recommendations

In actual development, it's recommended to choose appropriate solutions based on specific requirements. For simple desktop applications, basic CSS solutions are sufficient; for mobile or complex interaction scenarios, complete event handling solutions or third-party libraries are recommended. Additionally, accessibility considerations should be noted to ensure scroll disabling doesn't affect screen readers and other assistive technologies.