How to create a vertically scrollable div using CSS?

CSS | Vertical scrollable Div: In this tutorial, we will learn how to create a vertically scrollable div using CSS. By Anjali Singh Last updated : July 10, 2023

Introduction

Dealing with divs has become a regularity and divs are used for many purposes like to structure our code and to segregate our various sections of codes. Besides, we are also aware of many properties that we can imply or amend over divs to make our website or web page responsive but there are times we tend to forget some of the methods or properties which could be used while developing a website or web page and sometimes these properties also make our work easy, as sometimes they happen to reduce the number of codes. So one must always keep learning about various properties to explore new ways for developing a website or web page. With that note in mind, we must move forward with our topic.

Problem statement

To create a vertically scrollable div is not a challenging task as it seems but as mentioned earlier, one must keep learning new methods or properties, besides there might come a time when you will require a vertically scrollable div and at that time you would know the exact answer to your problem, all thanks to this article. Well, now that we have established an understanding of the importance of this discussion, so without much further adieu, let us move on with the task.

Creating a vertically scrollable div using CSS

As mentioned earlier, creating a vertically scrollable div is not tough, some things here and there and you will catch up to it in no time. For creating a vertically scrollable div for your website or web page you have to make use of a property known as overflow property. You might as well be familiar with this property and its behavior. So, by using overflow one can create a vertically scrollable div. As we all know that Overflow property takes up a certain amount of values such as overflow-x: hidden and overflow-y: auto. By making use of these values you will be able to create vertical and horizontal scroll bars.

To create a vertical scroll bar use x and y-axis and you should set the overflow-x property as hidden and overflow-y property as auto. By doing so the horizontal scroll bar property would hide automatically and only vertical scroll bar would be displayed. Therefore, the scroll bar created in the process would be vertically.

Syntax to create a vertically scrollable div using CSS

Element{
    overflow-x:hidden;
    overflow-y:auto;
}

Example to create a vertically scrollable div using CSS

<!DOCTYPE html>

<html>

<head>
    <style>
        div {
            background-color: #006969;
            color: #fff;
            width: 400px;
            height: 100px;
            overflow-x: hidden;
            overflow-y: auto;
            text-align: justify;
        }
    </style>
</head>

<body>
    <h1>create a vertically scrollable div</h1>
    <div>
      This is IncludeHelp. This is IncludeHelp. This is IncludeHelp.
      This is IncludeHelp. This is IncludeHelp. This is IncludeHelp.
      This is IncludeHelp. This is IncludeHelp. This is IncludeHelp.
      This is IncludeHelp. This is IncludeHelp. This is IncludeHelp.
      This is IncludeHelp. This is IncludeHelp. This is IncludeHelp.
      This is IncludeHelp. This is IncludeHelp. This is IncludeHelp.
      This is IncludeHelp. This is IncludeHelp. This is IncludeHelp.
      This is IncludeHelp. This is IncludeHelp. This is IncludeHelp.
      This is IncludeHelp. This is IncludeHelp. This is IncludeHelp.
      This is IncludeHelp. This is IncludeHelp. This is IncludeHelp.
      This is IncludeHelp. This is IncludeHelp. This is IncludeHelp.
      This is IncludeHelp. This is IncludeHelp. This is IncludeHelp.
      This is IncludeHelp. This is IncludeHelp. This is IncludeHelp.
    </div>
</body>

</html>

CSS | create a vertically scrollable div Example

In the above example, the div is vertically scrollable.

Try yourself

Pretty easy right? All we had to do was make use of a very familiar property known as Overflow property and set its x-axis value to hidden and y-axis value auto and bam! A vertical scrollable div emerged as a result. So go ahead and try this new learned method on your own by taking the help of examples.

CSS Examples »

Difference between values of word-break 'break-all' versus 'break-word' in CSS

How to hide element at the time of printing using CSS?