How to prevent body scrolling but allow overlay scrolling in CSS?

Last Updated : 11 Oct, 2024

Preventing body scrolling while allowing overlay scrolling means disabling the main page’s ability to scroll when an overlay (like a modal) is open. The overlay itself remains scrollable, ensuring users can navigate its content without the background page moving.

Preventing Body Scroll, Enable Overlay Scroll

HTML Structure: The HTML consists of a main content area and an overlay section, which includes a close button and scrollable content, ensuring a clear separation between the main content and the overlay.
CSS Styling: The CSS styles the overlay with a fixed position and a dark semi-transparent background while allowing vertical scrolling within the overlay. The body has a class (no-scroll) that hides overflow to prevent scrolling when the overlay is active.
JavaScript Functions: JavaScript is used to control the visibility of the overlay. The openOverlay function displays the overlay and adds the no-scroll class to the body, while the closeOverlay function hides the overlay and removes the class, restoring body scrolling.
User Interaction: The overlay is opened by clicking a button, and users can close it by clicking the close icon, allowing for a seamless and interactive experience where the main content remains fixed during overlay interaction.

Example: In this example we are following above-explained approach.

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" 
          content="width=device-width, initial-scale=1.0">
    <title>GeeksforGeeks - Overlay Scrolling Demo</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            line-height: 1.6;
            color: #333;
            margin: 0;
            padding: 20px;
            background-color: #f4f4f4;
        }

        .content {
            max-width: 800px;
            margin: 0 auto;
        }

        h1,
        h2,
        h3 {
            color: #0f9d58;
        }

        .open-overlay {
            background-color: #0f9d58;
            color: white;
            border: none;
            padding: 10px 20px;
            font-size: 16px;
            cursor: pointer;
            transition: background-color 0.3s;
        }

        .open-overlay:hover {
            background-color: #0b8043;
        }

        .overlay {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: rgba(0, 0, 0, 0.8);
            overflow-y: auto;
            display: none;
        }

        .overlay-content {
            background-color: #fff;
            margin: 50px auto;
            padding: 20px;
            max-width: 600px;
            border-radius: 8px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
        }

        .close-overlay {
            float: right;
            font-size: 24px;
            cursor: pointer;
            color: #0f9d58;
        }

        .no-scroll {
            overflow: hidden;
        }
    </style>
</head>

<body>
    <div class="content">
        <h1>GeeksforGeeks</h1>
        <h3>How to prevent body scrolling but allow overlay scrolling in CSS</h3>

        <p>
          GeeksforGeeks is a computer science portal for geeks. 
          It contains well written, well thought and well
            explained computer science and programming articles, 
          quizzes and more.
       </p>

        <button class="open-overlay">Open Overlay</button>

        <h2>Main Content</h2>
        <p>
          This is the main content of the page. It can be scrolled
          when the overlay is not active.
       </p>
        <!-- Add more content here to make the page scrollable -->
    </div>

    <div class="overlay" id="overlay">
        <div class="overlay-content">
            <span class="close-overlay" 
                  id="closeOverlay">
               &times;
            </span>
            <h2>Overlay Content</h2>
            <p>
              This is the overlay content. You can scroll this
              overlay independently while the main page remains fixed.
            </p>

            <!-- Add more content here to make the overlay scrollable -->

            <img src=
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/gfg_200x200-min.png"
                 alt="GeeksforGeeks Logo" 
                 style="max-width: 100%; 
                        height: auto;
                        margin-top: 20px;">
        </div>
    </div>

    <script>
        const body = document.body;
        const overlay = document.getElementById('overlay');
        const openOverlayBtn = document.querySelector('.open-overlay');
        const closeOverlayBtn = document.getElementById('closeOverlay');

        function openOverlay() {
            overlay.style.display = 'block';
            body.classList.add('no-scroll');
        }

        function closeOverlay() {
            overlay.style.display = 'none';
            body.classList.remove('no-scroll');
        }

        openOverlayBtn.addEventListener('click', openOverlay);
        closeOverlayBtn.addEventListener('click', closeOverlay);
    </script>
</body>

</html>

Output:

How to Make Auto Scrolling with CSS?

priyanshuchatterjee01

Improve

Article Tags :

How to prevent body scrolling but allow overlay scrolling in CSS?

Preventing Body Scroll, Enable Overlay Scroll

Similar Reads

Thank You!

What kind of Experience do you want to share?