How to create Horizontal Scroll Snap Using HTML and CSS ?

How to create Horizontal Scroll Snap Using HTML and CSS ?

Last Updated : 30 Jul, 2024

In this project, we are going to create a simple Horizontal Scroll Snap by using HTML and CSS only.

Glimpse of Project

scroll-hp

Approach:

The best way to animate the HTML objects is by using CSS classes and by setting the transitions at different stages.

HTML code:

Create an HTML file (index.html).
Link the CSS file in HTML that provides all the animation’s effect to our HTML. This is also placed in between the <head> tag.
Add six anchor <a> tag for creating buttons and assign particular classes to them.

HTML

<!DOCTYPE html>
<html lang="en">
  
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" 
          content="width=device-width, initial-scale=1.0">   
    <link rel="stylesheet" href="style.css">
</head>
  
<body>
    <h1>Horizontal Scroll Snap</h1>
    <div class="main_box">
    <!-- img-1 -->
    <a href="#">
        <img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20210223165952/gfglogo.png">
    </a>
    <!-- img-2 -->
    <a href="#">
        <img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20210218121103/resize16136304481344613575img2-300x150.jpg">
    </a>
    <!-- img-3 -->
    <a href="#">
        <img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20210215161411/geeksforgeeksremovebgpreview-300x300.jpg">
    </a>
    <!-- img-4 -->
    <a href="#">
        <img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20210223165952/gfglogo.png">
    </a>
    <!-- img-5 -->
    <a href="#">
        <img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20210218121103/resize16136304481344613575img2-300x150.jpg">
    </a>
    <!-- img-6 -->
    <a href="#">
        <img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20210215161411/geeksforgeeksremovebgpreview-300x300.jpg">
    </a>
    </div>
</body>
  
</html>

CSS

body {
    font-family: Arial, sans-serif;
    background-color: #2e8b57; /* Dark green background */
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100vh;
    overflow: hidden;
    color: white;
}

h1 {
    text-align: center;
    margin-bottom: 20px;
}

.main_box {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    width: 300px; /* Small width to ensure scrolling */
    padding: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    background-color: #fff;
    border-radius: 10px;
}

.main_box a {
    flex: 0 0 auto;
    scroll-snap-align: center;
    margin-right: 10px;
}

.main_box img {
    width: 150px;
    height: auto;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.main_box a:last-child {
    margin-right: 0;
}

Output:

scroll-hp

How to create Horizontal Scroll Snap Using HTML and CSS ?

R

rahulmahajann

Improve

Article Tags :

Similar Reads

How to Create Scrollable Horizontal Menu using CSS?

The scrollable horizontal menu is suitable for various screen sizes. To create a scrollable horizontal menu using CSS, you can make use of the overflow property on a container.Syntaxwhite-space: nowrapoverflow: auto;HTML<!DOCTYPE html> <html> <head> <style> div.scrollmenu { b

How to create horizontal scrollable sections using CSS ?

In this article, we will see how we can create a horizontal scrollable section using CSS. We are going to make different sections and make them horizontally scrollable using CSS. HTML code is used to create the basic structure of the sections and CSS code is used to set the style. HTML Code: In this

How to create an image gallery with a horizontal scrollbar using CSS ?

In this article, we will learn how to create an image gallery with a horizontal scrollbar using CSS. It provides a way to navigate through a set of images, on scroll horizontally to view different pictures. This effect is helpful when space optimization of the web page is a concern that efficiently

How to Create an Image Gallery with a Horizontal Scrollbar using CSS?

Image galleries are essential tools for showcasing multiple images within a single container on a website. They allow users to view a collection of images in an organized way. When we use the horizontal scrollbar, then we can reduce the space. In this tutorial, we will go through the steps on how to

How to Make a Div Horizontally Scrollable using CSS?

Creating a horizontally scrollable <div> is a practical CSS technique used to handle wide content such as image galleries, tables, or long text blocks without breaking the layout. Instead of wrapping or shrinking content, horizontal scrolling allows users to scroll sideways and view hidden ele