How Can I Add a Vertical Scrollbar to my div Automatically

A div container in HTML can have multiple elements and sub-elements and it has a specific size. So, sometimes there is a need to add a scrollbar with the div container when the items exceed the size limit of the div or when they do not fit into the div container properly.

This article will discuss the useful method of adding a vertical scrollbar to the div automatically using the HTML and CSS.

How to Add a Vertical Scrollbar to the div?

The developers can add vertical scrollbars to the div by applying the “overflow-y: scroll” property along with some other CSS properties on the div container element.

Example

Let’s understand this with a simple example by first creating a “div” container with some HTML elements inside it and then applying the CSS “overflow” property to add a vertical scroll bar with the div:

In the above code snippet:

• A “<div>” element has been added with a class declared as “ScrollBar”.
• The “<div>” container has a list of twenty front-end and back-end languages inside it.

Now, it is required to apply the CSS properties to the div by adding the class selector:

In the above CSS code snippet:

• The “overflow-y” property with the value “scroll” is added to create a vertical scroll bar for the div.
• After that, the “max-height” of the div container has been defined as “200px” and the “max-width” has been defined as “300px”.
• The value of the “text-align” property is set as “center” to align the items inside the div to the center. This is done only to make a better presentation of the div container.
• The background color for the div has been defined as “azure” that will differentiate the appearance of the div container from the rest of the screen.

As a result, the div container will be created and it will have a vertical scroll bar on the right side:

This is how we can add a vertical scrollbar to a div automatically.

Conclusion

The vertical scrollbar can be added to a div automatically by referring to the div element through an id or a class selector in the CSS style element and then apply the “overflow-y: scroll” property to the div element. The parameters of the scroll bar will appear according to the other added properties like “max-height” and “max-width” of the div container. This blog is an informative guide about the method for adding a vertical scroll bar to a div.