ADVERTISEMENT

ADVERTISEMENT

ADVERTISEMENT

How to create a vertically scrollable div using CSS?

Vertical scrollable div in CSS: Here, we are going to learn how to create a vertically scrollable div?
Submitted by Anjali Singh, on February 07, 2020

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.

The task:

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.

Property used:

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.

Solution:

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:

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

Example:

<!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. And if you think you need some assistance our writers and experts are available for you at https://ask.includehelp.com/.

CSS Tutorial & Examples »


ADVERTISEMENT



ADVERTISEMENT



Comments and Discussions

ADVERTISEMENT

ADVERTISEMENT

ADVERTISEMENT
ADVERTISEMENT
ADVERTISEMENT

Languages: » C » C++ » C++ STL » Java » Data Structure » C#.Net » Android » Kotlin » SQL
Web Technologies: » PHP » Python » JavaScript » CSS » Ajax » Node.js » Web programming/HTML
Solved programs: » C » C++ » DS » Java » C#
Aptitude que. & ans.: » C » C++ » Java » DBMS
Interview que. & ans.: » C » Embedded C » Java » SEO » HR
CS Subjects: » CS Basics » O.S. » Networks » DBMS » Embedded Systems » Cloud Computing
» Machine learning » CS Organizations » Linux » DOS
More: » Articles » Puzzles » News/Updates

© https://www.includehelp.com some rights reserved.