How to Make a Div Scrollable in HTML

In this post, we will go over how to make an HTML scrollable div. To do this we will use the CSS overflow property and set its value to either scroll or auto.

.scrollable-div1 { overflow: scroll; } .scrollable-div2 { overflow: auto; }

The main difference between overflow: scroll and overflow: auto is that scroll will always show the scroll bars, where auto will only show them when needed.

Let’s say I have the following HTML:

<div id="div1">
  <div id="div2">This is a scrollable div</div>
</div>

If we want to make “#div1” scrollable in the example above, we would need to set its CSS overflow property to scroll, and usually give it a fixed height and width.

#div1 { height: 100px; width:100px; overflow: scroll; }

Examples of HTML Scrollable divs

This first example will just show a simple HTML scrollable div.

<style>#div1 { height: 100px; width:300px; overflow: scroll; }</style>
<div id="div1">
  <div id="div2">This is a scrollable div. 
This is a scrollable div.
This is a scrollable div.
This is a scrollable div.
This is a scrollable div.
This is a scrollable div.
This is a scrollable div.
  </div>
</div>

The code above will produce the result below:

If we want to get rid of the horizontal scroll bar, we can just use the overflow-y property instead of overflow, and set it to scroll.

<style>#div3 { height: 100px; width:300px; overflow-y: scroll; border: 1px solid #444; padding: 5px; }</style>
<div id="div3">
  <div id="div4">This is a scrollable div. 
This is a scrollable div.
This is a scrollable div.
This is a scrollable div.
This is a scrollable div.
This is a scrollable div.
This is a scrollable div.
  </div>
</div>

The code above will produce the result below:

HTML scrollable div with Dynamic Content

Our final example will show how we can use a scrollable div to only show the scroll bar when more content is added to the scrollable div.

Let’s say I have the following HTML:

<style>#div5 { height: 100px; width:300px; overflow-y: auto; border: 1px solid #444; padding: 5px; }</style>
<div id="div5">
  <div id="div6">This is a scrollable div</div>
</div>
<p>Keep clicking the button below to add enough divs to show the scrollbar.</p>
<div id="click-me">Add text</div>

We will then use the jQuery appendTo() method to keep adding HTML divs to our scrollable div.

$("#click-me").click(function(){
    $('<div class="new-div">This is a scrollable div</div>').appendTo("#div5");
});

The final code and output for this example of how to have an HTML scrollable div is below:

Code Output:

Full Code:

<style>#div5 { height: 100px; width:300px; overflow-y: auto; border: 1px solid #444; padding: 5px; }</style>
<div id="div5">
  <div id="div6">This is a scrollable div</div>
</div>
<p>Keep clicking the button below to add enough divs to show the scrollbar.</p>
<div id="click-me">Add text</div>

<script>

$("#click-me").click(function(){
  $('<div class="new-div">This is a scrollable div</div>').appendTo("#div5");
});

</script>

Hopefully this article has helped you to understand how to make an HTML scrollable div.