Open In App

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

Improve
Improve
Like Article
Like
Save
Share
Report

In this article, we are going to learn how we can prevent body scrolling but allow overlay scrolling. The objective is to add a feature to an overlay where we will be able to scroll the overlay but we will not be able to scroll the background content. It means when the overlay is opened, the background/body is fixed and it doesn’t move. Generally, we can use this process to create a modal type effect in our design. In CSS there is no default property that we can add to make this process work.

Approach: To prevent body scrolling but allow overlay scrolling we have to switch the overflow to be hidden when the overlay is being shown. And while the whole page’s overflow is hidden or the scroll is disabled the overflow in the y-axis of the overlay is enabled and the overflow can be scrolled.

We can toggle this overflow of the body from scroll to hidden and vice versa using some basic scripting language like JavaScript. But in this article, we are not going to discuss that toggling and also we will see disabling the background part.

Used Property:

  • overflow: It allows us to manage what occurs when the content of an element is too large to fit inside a given space. This causes the material to “overflow” into another location, either horizontally (X-axis) or vertically (Y-axis) (Y-axis). It can be specified in the two-axis separately with overflow-x and overflow-y. It can take the following values.
    • visible: If no value is supplied for the overflow property, this is the default value. We can view our stuff clearly when it overflows into another region because of this characteristic.
    • hidden: The part of the text that overflowed will be taken out – it will be “invisible” if we use the hidden value. We don’t have to be concerned about the space taken up by the overflow. The material will no longer be in the region where it overflowed once it has been clipped out.
    • scroll: The scroll value also trims the text and adds a scrollbar, so we can scroll and see what was chopped off.
    • auto: The auto value detects overflow and inserts a scrollbar in the appropriate direction. 

Example: The above approach is demonstrated in the below-given code.

HTML




<!DOCTYPE html>
<html lang="en">
  
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content=
        "width=device-width, initial-scale=1.0">
    <style>
        body {
            overflow: hidden;
        }
  
        .overlay {
            position: fixed;
            overflow-y: scroll;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
        }
  
        [aria-hidden="true"] {
            display: none;
        }
  
        [aria-hidden="false"] {
            display: block;
        }
  
        .overlay div {
            margin: 15vh auto;
            width: 80%;
            max-width: 650px;
            padding: 30px;
            min-height: 150vh;
            background: darkslategray;
        }
  
        * {
            box-sizing: border-box;
        }
    </style>
</head>
  
<body>
    <h1 style="color:green; margin: 2rem;">
        GeeksforGeeks
    </h1>
      
    <h3 style="margin:2.2rem; margin-top:-2rem">
        How to have multiple CSS transitions on an element?
    </h3>
      
    <p>
        GeeksforGeeks.org was established with
        the intention of offering well-written,
        well-thought-out, and well-explained 
        answers to certain problems. The core 
        group of five super geeks, who are fans 
        of technology and computer science, has 
        been working in this direction nonstop.
        To make it simple for users to access, 
        GeeksforGeeks has organised its 
        information into a number of categories.
        GeeksforGeeks has everything covered,
        whether you want to learn algorithms,
        data structures, or just the programming 
        language itself! Even if you're seeking 
        for interview preparation materials,
        GeeksforGeeks provides a sizable collection 
        of company-specific interview experiences 
        that you may study from and that provide 
        users with insights into a company's hiring 
        process.
    </p>
  
    <button class="open-overlay">
        OPEN OVERLAY
    </button>
      
    <h3>DSA</h3>
  
    <p>
        A data structure is a collection of data 
        pieces that offers the simplest means of 
        storing and carrying out various operations 
        on computer data. An effective technique to 
        arrange data in a computer is through the 
        use of a data structure. The goal is to 
        simplify various chores in terms of space 
        and time requirements. Effective execution 
        of a number of crucial processes is made 
        possible by the selection of an appropriate 
        data structure. An effective data structure 
        uses the least amount of memory and 
        processing time possible. An instance of 
        ADT has also been defined by a data structure.
        ADT is short for ABSTRACT DATA TYPE.
        It has the formal definition of a triplet. 
        [D,F,A]
    </p>
  
    <h3>Algorithms</h3>
  
    <p>
        "A set of rules to be followed in calculations
        or other issue-solving procedures" or "A 
        process for solving a mathematical problem in 
        a finite number of steps that typically 
        involves recursive operations" are two 
        definitions of the word algorithm.As a result, 
        an algorithm is a set of limited procedures 
        used to solve a certain problem.As opposed to 
        using the normal recipe's printed directions,
        one would not follow them. In a similar vein,
        not all computer instructions written down are 
        algorithms.
    </p>
  
    <h3> C++ </h3>
    <p>
        As an extension of the C language that
        incorporates the object-oriented paradigm,
        C++ is a general-purpose programming language.
        It is a compiled language that is imperative.
        Because C++ is a middle-level language, it has 
        the benefit of enabling the development of both 
        low-level (drivers and kernels) and even 
        higher-level programmes  (games, GUI, desktop 
        apps etc.). Both C and C++ have the same
        fundamental grammar and coding structure.
    </p>
  
    <h3>JAVA </h3>
  
    <p>
        James Gosling created JAVA at Sun Microsystems 
        Inc. in 1995. Oracle Corporation eventually 
        purchased Sun Microsystems Inc. The programming 
        language is straightforward. Programming is 
        simple to write,compile, and debug with Java.
        It supports the development of modular programmes
        and reusable code. Java is an object-oriented,
        class-based programming language that is intended 
        to have a minimal amount of implementation 
        dependencies. a compiled general-purpose 
        programming language designed for developers to 
        write once and run anywhere All platforms that 
        support Java can run Java code. To create byte 
        code that can be executed on any Java Virtual 
        Machine, Java applications are compiled.
        Java's syntax is comparable to that of C/C++.
    </p>
  
    <section class="overlay" aria-hidden="false">
        <div>
            <h1 style="color:greenyellow; margin: 2rem;">
                GeeksforGeeks
            </h1>
              
            <h3 style="margin:2.2rem; margin-top:-2rem; 
                color:aliceblue;">
                How to have multiple CSS transitions on an element?
            </h3>
              
            <h2 style="color:aliceblue;">
                Hello, I'm the overlayer
            </h2>
              
            <h2 style="color:aliceblue;">
                You can scroll this Overlay
            </h2>
              
            <h2 style="color:aliceblue;">
                You can't scroll the background
            </h2>
              
            <img src=
                alt="" width="500rem"
                height="500rem" style="margin:2rem;">
        </div>
    </section>
</body>
  
</html>


Output:

 



Last Updated : 26 Jul, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads