How to Create a Scrollable Div in HTML

1. Use the CSS overflow Property to Make a Div Vertically Scrollable in HTML
2. Use the CSS overflow-y Property to Make a Div Horizontally Scrollable in HTML

This article will introduce the way to make a div scrollable in HTML. We’ll explore vertical and horizontal scrolls and see their implementation through examples.

Use the CSS overflow Property to Make a Div Vertically Scrollable in HTML

Using the CSS overflow property is probably the easiest way to make a div scrollable in HTML. The overflow property comes in handy when content overflows a div’s block.

We can use the property to clip the content and add the scrollbars. We can achieve it by setting the overflow property to auto.

As a result, the content of the div will be clipped, and a scrollbar will be added. Consequently, we will be able to scroll the div vertically.

Please note that the overflow property does not work for divs whose height is not specified.

Let’s see an example code of when the content exceeds the specified height and width limit.

For example, create a div named div1 with some dummy content. In CSS, set the height and the width of the div to 200px.

Ensure the dummy text inside the div is lengthy to exceed the div’s length.

Example Code:

<div class = "div1">
    What is Lorem Ipsum? Lorem Ipsum is simply a dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages and more recently with desktop publishing software like Aldus PageMaker, including versions of Lorem Ipsum.
</div>

body{
    background: white;
}
.div1{
    height : 200px;
    width: 200px;
}

Without overflow: auto;, the content takes more space than what is allocated for its div. This is not what we want, so let’s use the overflow property to manage the content.

Example Code:

body{
    background: white;
}
.div1{
    max-height : 200px;
    width: 200px;
    overflow: auto;
}

<div class = "div1">
    What is Lorem Ipsum? Lorem Ipsum is simply a dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages and more recently with desktop publishing software like Aldus PageMaker, including versions of Lorem Ipsum.
</div>

With overflow: auto;, the dummy text is clipped in the specified width and height, and a scroll bar appears so that we can scroll the div vertically to view all the content. If you want a scroll bar to appear every time, even if the height and width are sufficient, you can use overflow-y: scroll; instead.

Thus, we can use the CSS overflow property to create a div vertically scrollable in HTML.

Use the CSS overflow-y Property to Make a Div Horizontally Scrollable in HTML

To make a div scrollable horizontally, all we need to do is keep overflow-x: auto; and overflow-y: hidden; with the use of an extra property white-space: nowrap;. Let’s apply the following CSS property in our previously written HTML block.

For example, set the height of a division div1 to be 100px. Then set the overflow and the white-space properties as mentioned before.

The overflow-x: auto property ensures a scrolling provision if the content exceeds the div’s dimension on the x-axis.

Likewise, overflow-y set to hidden clips the content, and no scrolling provision is maintained on the y-axis. We have used the nowrap value for the white-space property to prevent line breaks.

Example Code:

.div1{
    height : 100px;
    width: 300px;

    overflow-x:auto;
    overflow-y:hidden;
    white-space: nowrap;
}

<div class = "div1">
    What is Lorem Ipsum? Lorem Ipsum is simply a dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages and more recently with desktop publishing software like Aldus PageMaker, including versions of Lorem Ipsum.
</div>