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.