Scroll snap align effect not working

HTML & CSS
#1

Hi,

I have been trying to implement a scroll snap align effect on the y-axis of my website but it does not work.
The code is very simple but it is not working.

<!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="ScrollSnap.css">
    <title>Vertical Scroll Snap Sandbox</title>
</head>
<body>
    <header>
        <div class="NavBar">
            My beautiful Nav Bar
        </div>
    </header>

    <main>

        <div class="AboutMe">
            About Me
        </div>

        <div class="MySkills">
            <div class="SkillLeft">
                Skill Left
            </div>
            <div class="SkillRight">
                Skill Right
            </div>
        </div>

        <div class="Gallery">
            My Gallery
        </div>

        <div class="Contact">
            Contact Me
        </div>

    </main>
    
</body>
</html>

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.NavBar {
    height: 180px;
    background-color: black;
    color: white;
}

.AboutMe {
    height: 120vh;
    background-color: lightblue;
}

.MySkills {
    display: grid;
    height: 99vh;
    grid-template-columns: 50% 50%;
    scroll-snap-type: y mandatory;
    scroll-snap-align: start;    
}

.SkillLeft {
    background-color: crimson;
    scroll-snap-align: start;
}

.SkillRight {
    background-color: darkolivegreen;
}

.Gallery {
    height: 150vh;
    background-color: goldenrod;
}

.Contact {
    height: 180vh;
    background-color: mediumseagreen;
}

Online CodePen code

I would like to apply the effect on a single div (a grid, divided into two columns).
I tried on a single div, in Firefox and Chrome but nothing works.

Do you think the problem can be the fact that I use “vh” for height and not pixel?

Thank you in advance.

#2

That doesn’t make sense as there is no scroll container for a grid that is two columns and the two columns don’t scroll independently of the grid container.

In your codepen to make each container stop at the top of the viewport you would need the scroll container to be the viewport…

html {
  scroll-snap-type: y mandatory;
  overflow: scroll;
}
header,
.AboutMe,
.MySkills,
.Contact,
.Gallery {
  scroll-snap-align: start;
}

Scroll snapping refers to the parent container that has scrolling (e.g. overflow:scroll or auto) and the content in that container scrolls inside it.

I’m wondering if you were perhaps looking for a sticky column effect where a shorter columns sticks to the top until the longer column has finished scrolling? If so see test number 4 here.

In a real site you would not use any fixed height for those containers. You’d use a min-height or just use content height.