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

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 prevent body scrolling but allow overlay scrolling in CSS?

P

priyanshuchatterjee01

Improve

Article Tags :

Similar Reads

How to prevent Body from scrolling when a modal is opened using jQuery ?

In this article, we will learn how we can prevent the body from scrolling when a popup or modal is opened using jQuery. This task can be easily accomplished by setting the value of the overflow property to hidden using the css() method or by adding and removing the class from the body.Table of Conte

How to set the overflow property to scroll in CSS ?

In this article, we will see how to set the overflow property to scroll in CSS. The overflow property is used to control the big content. It tells what to do when an element's content is too big to fit in the specified area. When the overflow property is set to scroll, the overflow is clipped, but a

How to run a code on scroll event in jQuery?

In this article, we will discuss how to run the code when users scroll the content using jQuery. To run the code on scrolling the content, the scroll() method is used. The scroll() method is used to run the code when the user scrolls in the specified element.Syntax:$(selector).scroll(function)Parame

How to Make Auto Scrolling with CSS?

Auto scrolling can add a dynamic touch to your web pages which makes them more engaging and interactive. Whether you need a horizontal or vertical scroll, CSS provides a way to achieve this effect smoothly. In this article, we will discuss how to make an auto scrolling effect with CSS. ApproachCreat

How to Implement Smooth Scrolling using Tailwind CSS ?

Smooth scrolling refers to the scrolling of a section of the webpage when the respective link is clicked. By default when we click a link it skips directly to that element using smooth scrolling the UX improves a lot. Tailwind CSS provides a utility class named scroll-smooth which applies the CSS pr