We will understand the CSS Make div scrollable in this article.
The "div" tag is the HTML element responsible for creating divisions within an HTML document.
Syntax:
<div>Some content…</div>
The <div> tag represents the opening tag, while the </div> tag represents the closing tag within the provided syntax. Content is enclosed between these two tags.
We have the option to enable scrolling for the <div> element by specifying the dimensions of the div element and making use of the CSS overflow property.
CSS Overflow
It's the CSS attribute used to stop content from overflowing the container.
Syntax:
overflow: auto| scroll;
We can set the value of the CSS overflow property to "auto" or "scroll" . Although the CSS overflow property can take various values to make the <div> element scrollable, we can only give values "auto" or "scroll" . Following are the descriptions of the overflow values:
- Auto: If the content fits in the container, the "auto" option leaves it as it is. If it does not, the "auto" option adds a scroll bar.
- Scroll: It is utilized to clip the overflowed content and add a scroll bar either vertically, horizontally, or vertically and horizontally on the basis of the size of the HTML element.
Vertical Scroll Bar
We have the option to generate the vertical scroll bar by making use of the CSS overflow-x and CSS overflow-y attributes.
Syntax:
overflow-x: hidden;
overflow-y: auto;
The overflow-x attribute is set to "hidden," concealing the horizontal scrollbar, while the overflow-y attribute is set to "auto," resulting in a vertical scrollbar being generated.
Horizontal Scroll Bar
We can generate the horizontal scrollbar by using the CSS overflow-x and CSS overflow-y attributes.
Syntax:
overflow-x: auto;
overflow-y: hidden;
The overflow-y attribute is set to "hidden" to conceal the horizontal scrollbar, and when set to "auto," it generates a scrollbar on the y-axis.
Demonstrations of Div Scrollable
Let's explore the process of enabling scroll functionality for a div through practical illustrations.
Demo 1:
We are going to create a div element with a class named "container" in the upcoming example.
We can enable scrolling for the div by setting the CSS overflow property to "scroll".
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Making a div scrollable utilizing the CSS overflow property</title>
<style>
.container {
height: 100px;
width: 100px;
background-color: yellowgreen;
overflow: scroll;
padding: 10px;
}
</style>
</head>
<body>
<h2>overflow: scroll</h2>
<div class="container">
We have utilized the CSS overflow property and assigned it a "scroll" value to construct the scrollable div.
</div>
</body>
</html>
Output:
Here is the result displayed below, where we can observe the scrollbar appearing on the <div> element having the class "container".
Demo 2:
In this upcoming example, we'll generate a div container and enable scrolling functionality by defining the CSS overflow attribute as auto.
The content contained within the class "div1" is appropriately sized, preventing the need for a scroll bar to appear by using the "auto" value for the overflow property.
The information contained within the "div2" class exceeds its boundaries, triggering the appearance of a scroll bar using the "auto" value in the overflow property.
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Making div scrollable utilizing the CSS overflow property</title>
<style>
.div1 {
height: 75px;
width: 150px;
background-color: plum;
overflow: auto;
padding: 10px;
}
.div2 {
height: 100px;
width: 100px;
background-color: plum;
overflow: auto;
padding: 10px;
}
</style>
</head>
<body>
<h2>overflow: auto</h2>
<div class="div1">
We have utilized the CSS overflow property and provided it the value "auto".
</div> <br> <br>
<div class="div2">
We are making the div scrollable with the help of the CSS overflow property and assigning it the "auto" value.
</div>
</body>
</html>
Output:
Here is the result below, demonstrating that the content within the div1 class does not exceed its boundaries, thus the scrollbar remains hidden.
The text within the div2 class exceeds the available space, causing a scrollbar to appear on the div2 class element.
Demo 3:
We are going to apply a vertical scrollbar to the designated <div> HTML element by utilizing the CSS overflow-x attribute and CSS overflow-y attribute.
We'll assign the "hidden" value to the CSS overflow-x attribute and set the CSS overflow-y property to "auto".
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Adding a div scrollable vertically with the help of the CSS overflow property</title>
<style>
div {
height: 100px;
width: 100px;
background-color: hotpink;
overflow-x: hidden;
overflow: auto;
padding: 10px;
}
</style>
</head>
<body>
<h2>Vertical div scrollable</h2>
<div>
We are making a vertical div scrollable with the help of the CSS overflow-x property and CSS overflow-y property.
</div>
</body>
</html>
Output:
Here, in the result, we can observe that if the content within the <div> HTML element exceeds its boundaries, the vertical scroll bar will appear on the <div> HTML element.
Demo 4:
We'll apply a horizontal scroll bar to the specified HTML element by utilizing the CSS overflow-x and overflow-y properties.
We are going to set the CSS overflow-x property to "auto" and the CSS overflow-y property to "hidden."
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Making a div scrollable horizontally by utilizing the CSS overflow property</title>
<style>
div {
margin: 6px, 6px;
padding: 6px;
background-color: gray;
width: 250px;
overflow-x: auto;
overflow-y: hidden;
white-space: nowrap;
}
</style>
</head>
<body>
<h2>Horizontal div scrollable</h2>
<div>
We are making a div scrollable on the horizontal side with the help of the CSS overflow-x and CSS overflow-y properties.
</div>
</body>
</html>
Output:
Here, in the result displayed below, we can observe that the material within the <div> element is not suitable.
The scroll bar is displayed on the <div> component horizontally.
Browser Support
The browsers that support the overflow, overflow-x , and overflow-y CSS properties are as follows:
- Safari
- Google Chrome
- Microsoft Edge
- Firefox
- Opera
Conclusion
We have understood how to create a CSS div scrollable in this article. Some points to remember are given downwards:
- We can construct a scrollable div by utilizing the overflow, overflow-x , and overflow-y CSS properties.
- To make the div scrollable, we can set either the "auto" or "scroll" value of the CSS overflow property.
- If we require the vertical scrollbar, then overflow-x is given the "hidden" value, and overflow-y is given the "auto" value.
- If we require the horizontal scrollbar, overflow-x is given the "auto" value, and overflow-y is given the "hidden" value.