How to Create a Vertical Scrolling Section in CSS

Introduction

A vertical scrolling section allows content to overflow vertically when the height of the container is limited. This is useful when you need to display a large amount of content within a confined space, such as in sidebars, lists, or special content sections. With CSS, you can enable vertical scrolling by controlling the height of a container and using the overflow-y property.

In this tutorial, you'll learn how to create a vertical scrolling section using CSS. We will use the overflow-y property to enable vertical scrolling and style the content within the scrolling area.

Development Steps

Create the HTML Structure for the Vertical Scroll Section: Set up the basic HTML for the section.
Set a Fixed Height for the Scrollable Section: Use CSS to set a height that allows vertical scrolling when the content exceeds it.
Enable Vertical Scrolling with CSS: Apply the overflow-y property to enable vertical scrolling.
Style the Scrollable Content: Add padding, borders, and other styles to make the section visually appealing.
Make the Section Responsive: Use media queries to adjust the layout for different screen sizes.

Step 1: Create the HTML Structure

We will begin by creating the basic HTML structure for the vertical scrolling section. Inside the container, we’ll include a number of items that will overflow vertically.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vertical Scrolling Section</title>
</head>
<body>

    <!-- Step 1: Vertical scrolling section structure -->
    <div class="scroll-container">
        <div class="scroll-item">Item 1</div>
        <div class="scroll-item">Item 2</div>
        <div class="scroll-item">Item 3</div>
        <div class="scroll-item">Item 4</div>
        <div class="scroll-item">Item 5</div>
        <div class="scroll-item">Item 6</div>
        <div class="scroll-item">Item 7</div>
        <!-- Add more items as needed -->
    </div>

</body>
</html>

Explanation:

The div with the class scroll-container will hold all the items that will overflow vertically.
Each item inside the container is represented by a div with the class scroll-item.

Step 2: Set a Fixed Height for the Scrollable Section

Next, we’ll set a fixed height for the container. This ensures that when the content exceeds the container's height, it becomes scrollable.

/* Step 2: Set a fixed height for the container */
.scroll-container {
    height: 300px;  /* Fixed height for the scrollable section */
    border: 2px solid #333;  /* Adds a border around the container */
    padding: 10px;  /* Padding inside the container */
}

Explanation:

height: 300px;: Sets the height of the container to 300px. Content that exceeds this height will be hidden and require scrolling to view.
border: 2px solid #333;: Adds a border around the container to make the section visually distinct.
padding: 10px;: Adds padding inside the container to prevent the content from touching the edges.

Step 3: Enable Vertical Scrolling with CSS

To enable vertical scrolling, we use the overflow-y property. This will create a scrollbar when the content inside the container exceeds its set height.

/* Step 3: Enable vertical scrolling */
.scroll-container {
    overflow-y: auto;  /* Enables vertical scrolling */
}

Explanation:

overflow-y: auto;: Enables vertical scrolling when the content exceeds the height of the container. A scrollbar will appear automatically as needed.

Step 4: Style the Scrollable Content

Now, let's style the individual scroll items to make them more visually appealing. We’ll add background color, padding, and borders to the items.

/* Step 4: Style the scroll items */
.scroll-item {
    background-color: #3498db;  /* Light blue background */
    color: white;  /* White text */
    padding: 15px;
    border-radius: 5px;  /* Rounded corners */
    margin-bottom: 10px;  /* Space between items */
}

Explanation:

background-color: #3498db;: Sets a light blue background for each scroll item.
padding: 15px;: Adds padding inside each item to make the text easier to read.
border-radius: 5px;: Adds rounded corners to the items.
margin-bottom: 10px;: Adds space between each scroll item.

Step 5: Make the Section Responsive

We can also add media queries to adjust the layout for smaller screens. For example, you can reduce the container's height on mobile devices to ensure the layout remains usable.

/* Step 5: Responsive design for smaller screens */
@media (max-width: 600px) {
    .scroll-container {
        height: 200px;  /* Reduces the height of the container on small screens */
    }

    .scroll-item {
        padding: 10px;  /* Adjusts padding for smaller screens */
    }
}

Explanation:

height: 200px;: On screens smaller than 600px, the height of the container is reduced to 200px to fit better on mobile devices.
padding: 10px;: Reduces the padding inside the items for a more compact design on smaller screens.

Complete Code

Here’s the complete HTML and CSS code for creating a vertical scrolling section using CSS:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vertical Scrolling Section</title>
    <style>
        /* Step 2: Set a fixed height for the container */
        .scroll-container {
            height: 300px;
            border: 2px solid #333;
            padding: 10px;
            overflow-y: auto;  /* Enables vertical scrolling */
        }

        /* Step 4: Style the scroll items */
        .scroll-item {
            background-color: #3498db;
            color: white;
            padding: 15px;
            border-radius: 5px;
            margin-bottom: 10px;
        }

        /* Step 5: Responsive design for smaller screens */
        @media (max-width: 600px) {
            .scroll-container {
                height: 200px;  /* Adjusts height for smaller screens */
            }

            .scroll-item {
                padding: 10px;  /* Adjusts padding for smaller screens */
            }
        }
    </style>
</head>
<body>

    <!-- Vertical Scrolling Section -->
    <div class="scroll-container">
        <div class="scroll-item">Item 1</div>
        <div class="scroll-item">Item 2</div>
        <div class="scroll-item">Item 3</div>
        <div class="scroll-item">Item 4</div>
        <div class="scroll-item">Item 5</div>
        <div class="scroll-item">Item 6</div>
        <div class="scroll-item">Item 7</div>
    </div>

</body>
</html>

Output

You can play with the above HTML in Online HTML Editor and Compiler. Here is the output of the above HTML page.:

Conclusion

In this tutorial, you learned how to create a vertical scrolling section using CSS. By setting a fixed height for the container and enabling vertical scrolling with the overflow-y property, you can manage large amounts of content in a confined space. Additionally, the scrollable content was styled for a clean, user-friendly experience, and the layout was made responsive to fit different screen sizes.

Java Guides

Search This Blog