How to prevent body scrolling but allow overlay scrolling in CSS ?
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:
Please Login to comment...