How to make a div vertically scrollable

Let’s imagine a scenario that you might have encountered while writing HTML codes.

A situation might occur where you have the whole width of the screen available for taking, but not the whole height. Say you have a large chunk of text you wish to embed into your page. You can easily do that if the div that will contain the text is vertically scrollable.

A common use case of this is the embedded code windows on pages where a certain height has been set for the div and the code line exceeds this height. The code window in this kind of situation is usually made scrollable.

How to make HTML divs that scroll vertically

To achieve this very useful functionality:

  1. CSS has a property called overflow, which has many values like:

    • auto: Indicates that there should be a scroll bar in the x or y-axis, depending on where the display is chopped.

    • hidden: The overflow should be chopped away, making it invisible.

    • scroll: This provides a scroll bar for viewing clipped content.

    • visible: This leaves the overflow to display outside the box of the div.

  2. We can use a combination of overflow-x and overflow-y to place the scrollbar vertically, horizontally, or both. For the vertical scrollbar, overflow-x:hidden and overflow-y:auto will be set in the CSS file, and vice versa for the horizontal scrollbar.

Below are some code examples.

Code

<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>Goodnews</h1>
        <div class="scroll">Aliquam erat volutpat. 
          Pellentesque vel augue ut ipsum 
          dignissim ornare. Donec commodo fringilla
           neque, sed aliquet lacus dapibus quis. 
           Integer tempus faucibus justo in feugiat. 
           Etiam feugiat orci nec tortor faucibus, nec 
           dictum justo eleifend. Curabitur fringilla 
           posuere risus, vel elementum lorem sagittis et.
          Aliquam tincidunt consequat nibh ut sollicitudin. 
          am sit amet sodales arcu, et ultricies purus. Aliquam
           molestie urna id metus vehicula, ac venenatis sapien 
           accumsan. In commodo posuere dapibus. Nulla hendrerit,
            enim at finibus semper, 
          ipsum dui faucibus leo, 
          non commodo turpis neque ut est.
        </div>
        </center>
    </body>
</html>

The code above implements the scrollbar as described in method 1.

To implement method 2, just change the CSS portion of this code by removing overflow-y and overflow-x, and replace them with overflow:auto.

Output

The output from the two codes will be the same and will look like the image below.

You can see the scrollbar in the right corner of the div.

Free AI Mock Interviews
Coding Interview
Coding PatternsFree Interview
Gain insights and practical experience with coding patterns through targeted MCQs and coding problems, designed to match and challenge your expertise level.
System Design
You TubeFree Interview
Learn to design a video streaming platform like YouTube by tackling functional and non-functional requirements, core components, and high-level to detailed design challenges.

Free Resources

License: Creative Commons-Attribution-ShareAlike 4.0 (CC-BY-SA 4.0)