Make a Div vertically scrollable using CSS
Making a Div Vertically Scrollable Using CSS
There’s a chance that the content we’ll be using in our website might be huge and might take up a lot of space, meaning other elements of the site might get displaced, which could hinder the site’s responsiveness. To avoid this, we need to provide users with scrollable content so that if they’re interested, they can scroll down to read the entire content.
In this article, we’ll look at how to make a div scroll vertically and what properties we’ll use to do this.
How to Make a Div Vertically Scrollable
The overflow property can be used to make a DIV scroll vertically. It accepts multiple values, such as hidden and auto. Depending on the value used, we can create both horizontal and vertical scrollbars. Using the auto value results in a vertical scrollbar. Let’s take a look at the syntax of the overflow property.
Grammar
overflow:hidden/visible/clip/scroll/auto/inherit;
We’ll use the x-axis and y-axis. We can set the x-axis’s properties to hidden and the y-axis’s to auto. This will hide the horizontal scrollable bar, leaving only the vertical bar visible, and automatically create the desired div.
Example
In this example, we’ll declare a div and then write a paragraph. We’ll add the overflow property to it to make it scrollable vertically.
<!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 enhance their skills and fluency in code. The coder can choose a language to write their code in, depending on their interests, as every language has its own expertise and functions.
</div>
</center>
</body>
</html>
In the code above, we used the overflow property and changed its x-axis to hidden and y-axis to visible, which gives us a vertical scrollbar within the paragraph we’re writing. Let’s look at the output we’ll get after executing this code.
You can look at the output above and see that we have a vertical scrollbar that we can use to scroll down.
Note – When using the overflow property, it’s necessary to specify a “block element” element, otherwise it may not work. This is because the property is primarily used to clip content or add a scrollbar (either vertically or horizontally) when the content being used is too large to fit within the designated area.
Let’s look at another example to better understand this property.
Example
In this example, instead of changing the x and y axes, we’ll set the value of the property to auto to make the div scroll vertically. Here’s 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 vertically 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 enhance their skills and fluency in code. The coder can
choose a language to write their code in depending on their interest, as every
language has its own expertise and functions.
</div>
</center>
</body>
</html>
In the code above, instead of setting the x-axis to hidden and the y-axis to auto, we change the overflow property’s value to auto and use the same example to see what our output will be. Let’s take a look at the output this code will produce.
You can look at the output above and see that even with the auto value for the overflow property, we still have a scrollbar.
Conclusion
The overflow property is widely used to clip content when it takes up a lot of space. Or, if we want to add a scrollbar to allow the user to scroll down, reducing the overall space it takes up on the webpage.
In this article, we saw how to use the overflow property, how to add a vertical scrollbar to a div, and more about the values used in the overflow property.