JIYIK CN >

This article will show you ways to make a div scrollable in HTML. We will explore vertical and horizontal scrolling and see their implementation with examples.

Use CSS overflow property to make HTML Div vertically scrollable

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

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

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

请注意, the overflow property has no effect on a div that does not specify a height.

Let's look at the example code for when the content exceeds the specified height and width limits.

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

Make sure the dummy text inside the div is longer than the length of the div.

Sample 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;
}

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

Sample 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>

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

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

Use CSS overflow-y property to make HTML Div horizontally scrollable

To make the div scroll horizontally, all we need to do is keep overflow-x: auto; and overflow-y: hidden; using the additional property whitespace: nowrap;. Let's apply the following CSS properties in the HTML block we wrote earlier.

For example, set the height of a div1 to 100px. Then set the overflow and margin properties as described above.

overflow-x: autoThe property ensures that a scroll bar is provided if the content exceeds the div's dimensions on the x-axis .

Likewise, overflow-y is set to hide the clipped content and retain no scrollbar on the y-axis. We use a nowrap value for the white-space property to prevent line wrapping.

Sample 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>