How to Create a Horizontal Scrolling Section with HTML and CSS

Introduction

Horizontal scrolling sections can be a great way to display content like image galleries, product listings, or any other items that need to be placed side by side. Unlike vertical scrolling, where the user scrolls down to see more content, horizontal scrolling allows the user to scroll left and right. Using CSS, you can easily create a horizontal scrolling section that works smoothly across devices.

In this tutorial, you'll learn how to create a horizontal scrolling section using CSS. We will use the overflow-x property to enable horizontal scrolling and Flexbox to align the items in a row.

Development Steps

Create the HTML Structure: Set up the basic HTML for the horizontal scrolling section.
Use Flexbox to Align Items Horizontally: Apply Flexbox to align the content in a row.
Enable Horizontal Scrolling with CSS: Use the overflow-x property to enable horizontal scrolling.
Style the Items: Add styling to ensure that the content looks good.
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 a basic HTML structure with a container that holds multiple items. Each item will represent the content inside the horizontal scrolling section.

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

    <!-- Step 1: Horizontal 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>
        <!-- Add more items as needed -->
    </div>

</body>
</html>

Explanation:

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

Step 2: Use Flexbox to Align Items Horizontally

Next, use Flexbox to align the items in a horizontal row inside the scroll-container.

/* Step 2: Flexbox layout for horizontal alignment */
.scroll-container {
    display: flex;  /* Flexbox aligns items in a row */
    gap: 20px;  /* Space between each item */
    padding: 20px;  /* Padding around the container */
}

Explanation:

display: flex;: Flexbox aligns the items in a row.
gap: 20px;: Adds space between each item.
padding: 20px;: Adds padding around the container for better spacing.

Step 3: Enable Horizontal Scrolling with CSS

To enable horizontal scrolling, we need to allow the container to scroll horizontally when the items overflow its width. This can be done using the overflow-x property.

/* Step 3: Enable horizontal scrolling */
.scroll-container {
    overflow-x: auto;  /* Enables horizontal scrolling */
    white-space: nowrap;  /* Prevents items from wrapping to the next line */
}

Explanation:

overflow-x: auto;: Allows horizontal scrolling when the content exceeds the width of the container.
white-space: nowrap;: Prevents the items from wrapping to the next line, forcing them to stay in a single row.

Step 4: Style the Items

Let’s add some styles to the individual scroll items, including background color, padding, and border-radius to make them visually appealing.

/* Step 4: Style the scroll items */
.scroll-item {
    background-color: #3498db;  /* Light blue background */
    color: white;  /* White text */
    padding: 20px;
    border-radius: 10px;  /* Rounded corners */
    min-width: 200px;  /* Ensures items have a minimum width */
    text-align: center;
}

Explanation:

background-color: #3498db;: Sets a light blue background color for each item.
padding: 20px;: Adds padding inside the items for better spacing.
border-radius: 10px;: Rounds the corners of the items for a smoother look.
min-width: 200px;: Ensures that each item has a minimum width.

Step 5: Make the Section Responsive

We can add media queries to adjust the layout for different screen sizes. For mobile devices, you may want to reduce the size of the items to fit better on smaller screens.

/* Step 5: Responsive design for smaller screens */
@media (max-width: 600px) {
    .scroll-item {
        min-width: 150px;  /* Reduces the width of the items on small screens */
        padding: 15px;  /* Adjusts padding */
    }
}

Explanation:

min-width: 150px;: On screens smaller than 600px, the minimum width of the items is reduced to 150px.
padding: 15px;: Reduces the padding to create a more compact layout on smaller screens.

Complete Code

Here’s the complete HTML and CSS code for creating a horizontal 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>Horizontal Scrolling Section</title>
    <style>
        /* Step 2: Flexbox layout for horizontal alignment */
        .scroll-container {
            display: flex;
            gap: 20px;
            padding: 20px;
            overflow-x: auto;  /* Enables horizontal scrolling */
            white-space: nowrap;  /* Prevents items from wrapping */
        }

        /* Step 4: Style the scroll items */
        .scroll-item {
            background-color: #3498db;
            color: white;
            padding: 20px;
            border-radius: 10px;
            min-width: 200px;
            text-align: center;
        }

        /* Step 5: Responsive design for smaller screens */
        @media (max-width: 600px) {
            .scroll-item {
                min-width: 150px;  /* Adjusts width for smaller screens */
                padding: 15px;
            }
        }
    </style>
</head>
<body>

    <!-- Horizontal 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>
        <!-- Add more items as needed -->
    </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 horizontal scrolling section using CSS. By applying Flexbox for horizontal alignment and overflow-x: auto to enable scrolling, you can easily build sections that allow users to scroll through content horizontally. You can further enhance the section by styling the items and making the layout responsive for different screen sizes.

Java Guides

Search This Blog