Open In App

Making a div vertically scrollable using CSS

Improve
Improve
Improve
Like Article
Like
Save Article
Save
Share
Report issue
Report

Making a div vertically scrollable is easy by using the CSS overflow property. There are different values in the overflow property. We can use that property for getting a scroll bar on a web page. The below-mentioned examples are the ways to set a vertical scroll bar on a web page.

Example 1: In this example, we have set the overflow-x: hidden; and overflow-y: auto; which will automatically hide the horizontal scroll bar and present only the vertical scrollbar.

html




<!DOCTYPE html>
<html>
 
<head>
    <style>
        h1 {
            color: Green;
        }
 
        div.scroll {
            margin: 4px, 4px;
            padding: 4px;
            background-color: green;
            width: 500px;
            height: 110px;
            overflow-x: hidden;
            overflow-y: auto;
            text-align: justify;
        }
    </style>
</head>
 
<body>
    <center>
        <h1>GeeksforGeeks</h1>
        <div class="scroll">It is a good
            platform to learn programming.
            It is an educational website.
            Prepare for the Recruitment drive
            of product based companies
            like Microsoft, Amazon,
            Adobe etc with a free online placement
            preparation course. The course focuses
            on various MCQ's & Coding question
            likely to be asked in the
            interviews & make your upcoming placement
            season efficient and
            successful. Also, any geeks can help other
            geeks by writing articles on the GeeksforGeeks,
            publishing articles follow few steps that are
            Articles that need little modification
            /improvement from reviewers are published first.
            To quickly get your articles reviewed, please refer
            existing articles, their formatting style,
            coding style, and try to make you are close
            to them. In case you are a beginner,
            you may refer Guidelines to write an Article
        </div>
    </center>
</body>
 
</html>


Output:

ezgifcom-video-to-gif-(12)

Output

Example 2: In this example use auto in place of overflow-x:hidden; and overflow-y:auto; to make div vertically scrollable. 

html




<!DOCTYPE html>
<html>
 
<head>
    <style>
        h1 {
            color: Green;
        }
 
        div.gfg {
            margin: 5px;
            padding: 5px;
            background-color: green;
            width: 500px;
            height: 110px;
            overflow: auto;
            text-align: justify;
        }
    </style>
</head>
 
<body>
    <center>
        <h1>GeeksforGeeks</h1>
        <div class="gfg">It is a good platform
            to learn programming. It is an educational
            website.Prepare for the Recruitment drive
            of product based companies like Microsoft,
            Amazon, Adobe etc with
            a free online placement preparation course.
            The course focuses on various MCQ's & Coding
            question likely to be asked in the interviews &
            make your upcoming placement season efficient
            and Successful. Also, any geeks can help other
            geeks by writing articles on the GeeksforGeeks,
            publishing articles follow few steps that are
            Articles that need little modification/improvement
            from reviewers are published first. To quickly get
            your articles reviewed, please refer existing
            articles, their formatting style,coding style,
            and try to make you are close to them. In case you
            are a beginner, you may refer Guidelines
            to write an Article
        </div>
    </center>
</body>
 
</html>


Output: 

ezgifcom-video-to-gif-(13)

Output



Last Updated : 29 Nov, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads