Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
Making a Div vertically scrollable using CSS
There is a possibility that the content that we are going to use in our website may be huge and may take a lot of space which means that the other elements of the website might get displaced which can hamper the responsiveness of the website. To avoid such incidence, the user needs to be given scrollable content so that if the user is interested he or she might scroll down to read the whole content.
In this article, we are going to have a look at how we can make a div vertically scrollable and what is the property that we will be using to do so.
How to make a div vertically scrollable?
The overflow property can be used to make a DIV vertically scrollable as there are multiple values which can be entered in the overflow property. There are values like hidden and auto. We can make a horizontal and a vertical scrollable bar depending upon the value used. If we use the auto value then, we can get the vertical scrollable bar. Let’s look at the syntax of the overflow property:
Syntax
overflow:hidden/visible/clip/scroll/auto/inherit;
We will be going to use x axis as well as the y axis and then can set properties of x axis to hidden and y axis to auto which will hide the horizontal scrollable bar and only the vertical bar will be visible and we will automatically get out desired div.
Example
In this example, we are going to declare a div and then write a paragraph to which we will add the overflow property to make the div vertically scrollable.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Example of vertically scrollable div</title>
<style>
h2 {
color: Green;
}
.scrl {
padding: 3px;
color: white;
margin: 2px, 2px;
background-color: black;
height: 118px;
overflow-x: hidden;
color: white;
overflow-y: auto;
text-align: justify;
width: 489px;
}
</style>
</head>
<body>
<center>
<h2>Hi! This an example of the vertically scrollable div</h2>
<div class="scrl">This is an example of the vertically scrollable
div many beginner coders need the help of some articles or some sort of tutorials
to write there code. There are many instances in which the coder might need help
or can be stuck on a particular question. The community of coders is very huge
and is ready to help everyone at anywhere and at whatever time. The coding community
will help the coder to enhance his skills and his fluency in code. The coder can
choose a language to write his or her code depending on his interest as every
language has its own expertise and functions.
</div>
</center>
</body>
</html>
In the above code, we used the overflow property and changed its x axis to hidden and y axis to visible which gave us a vertically scrollable bar in our paragraph that we’ve written here. Let’s look at the output that we will be getting from executing the code.
You can look at the above output and can see that we are having a vertically scrollable bar which can be used to scroll down.
Note − When we use the overflow property, it is necessary to specify the element of the “block element” otherwise it might not work. As the property is mostly used to clip the content or adding to add scrollable bar (whether vertical or horizontal) because the content which is being used is too big to fit in the specified area.
Let’s look at another example to understand the property better.
Example
In this example, we are going to set the value of the property to auto instead of changing the x axis and the y axis of the property to make the div vertically scrollable. Below is the code for that.
<!DOCTYPE html>
<html lang="en">
<head>
<title> Another Example of vertically scrollable div</title>
<style>
.scrlr {
margin: 4px;
padding: 4px;
color: white;
background-color: black;
width: 488px;
height: 118px;
margin: 4px;
text-align: justify;
overflow: auto;
width: 488px;
text-align: justify;
}
h2 {
color: Red;
}
</style>
</head>
<body>
<center>
<h2>Hi! This another example of the verticallly scrollable div</h2>
<div class="scrlr">This is an example of the vertically scrollable div
many beginner coders need the help of some articles or some sort of tutorials to
write there code. There are many instances in which the coder might need help or
can be stuck on a particular question. The community of coders is very huge and
is ready to help everyone at anywhere and at whatever time. The coding community
will help the coder to enhance his skills and his fluency in code. The coder can
choose a language to write his or her code depending on his interest as every
language has its own expertise and functions.
</div>
</center>
</body>
</html>
In the above code, we changed the value of the overflow property to auto instead of setting the x axis to hidden and the y axis to auto and used the same example to see what our output will be. Let’s look at the output that will be generated from this code.
You can look at the above output and can see that we have the scrolling bar even after using the auto value on the overflow property.
Conclusion
The overflow property is widely used so as to clip the content if the content is taking a lot of space. Or, if we want to add a scroll bar for the user to scroll down reducing the overall space that it is taking on a webpage.
In this article, we saw how we can use the overflow property and how we can add a vertically scrollable bar on a div and more about the values used in overflow property.
413 Views
To Continue Learning Please Login