How to Add a Scroll Bar to an HTML Div Element



HTML


In this article, we show how to add a scroll bar to an HTML div element.

A scroll bar is very important, because without the proper coding to a div element, there will be overflow of content from the div element. To prevent this, we must add a scroll element to the div element.

So in order to add horizontal and vertical scroll bars to a div element in HTML, we give add an overflow attribute to the div element.

If you want scroll bars to present at all times, even if not needed, we use the following code shown below.



The overflow attribute is what allows us to add scroll bars to an HTML element.

If the overflow attribute is set to scroll, then a scroll bar will always be present on the div element.

This is shown below.

This is an HTML div element. Within this element is text. This text doesn't matter because it's just filler text. It's designed to just take up so that space can be taken up. It serves to show how a div element with scroll bars will look. Looking at this div element, you should get an idea of what the scroll bars do and how it functions. With these scroll bars, a user can scroll either vertically or horizontally through the content within this div bar. This is just a demonstration of the use of this.


So now you see how this operates.

Now let's say you only want the scroll bars to appear if necessary. For example, if the text isn't long enough to elicit a scroll bar, then you don't want it shown.

This is shown in the following code below.



With the overflow attribute set to auto, the scroll bars will only be shown if the content within the div element is long enough to elicit scroll bars.

This is shown below, first, with text that is short.

This is an HTML div element.


Since the text is very short, no scroll bars are shown, because the text is short and doesn't extend enough to elicit scroll bars.

Now we show the div element with long text.

This is an HTML div element. Within this element is text. This text doesn't matter because it's just filler text. It's designed to just take up so that space can be taken up. It serves to show how a div element with scroll bars will look. Looking at this div element, you should get an idea of what the scroll bars do and how it functions. With these scroll bars, a user can scroll either vertically or horizontally through the content within this div bar. This is just a demonstration of the use of this.


Now because the text is long, then scroll bar is shown (the vertical scroll bar). The horizontal scroll bar won't be shown because the text does not extend across horizontally. Content will only extend across horizontally if there is an image that exceeds the horizontal width of the div tag, or you add a white-space: nowrap; attribute to the div element. This allows text to extend across horizontally. This is shown below.

This is an HTML div element. Within this element is text. This text doesn't matter because it's just filler text. It's designed to just take up so that space can be taken up. It serves to show how a div element with scroll bars will look. Looking at this div element, you should get an idea of what the scroll bars do and how it functions. With these scroll bars, a user can scroll either vertically or horizontally through the content within this div bar. This is just a demonstration of the use of this.


Now we will show how to add only a horizontal element to a div element.

To add a horizontal scroll bar to a div element that will extend across horizontally only if there is an image that is greater than the width of the div element, we use the following code below.



The overflow-x attribute can be used to add scroll bars horizontally across a div element.

The overflow-y attribute (less used) can be used to add scroll bars exclusively vertically across a div element.

And this is how to add a scroll bar to an HTML div element.


Related Resources

How to Create a Definition List in HTML

How to Create a Table in HTML

How to Add a Class or ID to an Anchor Tag in HTML

How to Create a Reset Button in HTML

How to Create a Text Box that a User Cannot Type Inside Of

How to Create a List Box in HTML

How to Create a Multi-line Text Input (Textarea) in HTML

HTML Comment Box is loading comments...