Home > Article > Web Front-end > Make a Div vertically scrollable using CSS
The content we want to use in the website can be large and may take up a lot of space, which means that other elements of the website may be displaced, affecting the responsiveness of the website. To avoid this from happening, you need to provide the user with scrollable content so that if the user is interested, he or she can scroll down to read the entire content.
In this article we will see how to make a div scroll vertically and what properties we will use to achieve this.
The overflow attribute can be used to make a DIV scroll vertically because multiple values can be entered in the overflow attribute. There are some values such as hidden and auto. We can create horizontal and vertical scrollbars based on the values used. If we use auto value we can get vertical scrollbar. Let’s take a look at the syntax of the overflow attribute:
overflow:hidden/visible/clip/scroll/auto/inherit;
We will use x-axis and y-axis and set the properties of x-axis to hidden and the properties of y-axis to automatic, this will hide the horizontal scroll bar and only show the vertical scroll bar, we will automatically get what we need div.
In this example, we will declare a div and then write a paragraph where we will add the overflow attribute to make the div scroll 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 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 have used the overflow property and changed its x-axis to hidden and y-axis to visible, which gives us a vertical scrollable bar in the paragraph we are writing here. Let's look at the output we get from executing the code.
You can look at the output above and you can see that we have a vertically scrollable bar that can be used to scroll down.
Note - When we use the overflow attribute, we need to specify the element of "block element", otherwise it may not work. Since this property is mainly used for clipping content or adding scrollable bars (either vertically or horizontally) because the content being used is too large to fit in the specified area.
Let's look at another example to understand this property better.
In this example, instead of changing the x-axis and y-axis of the property, we will set the value of the property to auto to make the div scroll vertically. The following is the code:
<!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 attribute from hidden x-axis and automatic y-axis to auto, and used the same example to see our output results. Let's take a look at the output this code will generate.
You can look at the above output and you can see that even with the auto value on the overflow property, we still have scrollbars.
The overflow property is widely used to clip content when it takes up a lot of space. Or if we want to add a scroll bar for the user to scroll down, thus reducing the overall space it takes up on the web page.
In this article, we learned how to use the overflow attribute and how to add a vertical scrollbar on a div and more about the values used in the overflow attribute.
The above is the detailed content of Make a Div vertically scrollable using CSS. For more information, please follow other related articles on the PHP Chinese website!