Guillaume Duverger - Développement & Graphisme - Blog

One page CSS Scroll Snap

Code :

<main>
<div class="demo-nav">
<ul>
<li><a href="#accueil">Accueil</a></li>
<li><a href="#propos">A propos</a></li>
<li><a href="#services">Services</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</div>
<div class="section section-1" id="accueil">
<h2>Accueil</h2>
</div>
<div class="section section-2" id="propos">
<h2>A propos</h2>
</div>
<div class="section section-3" id="services">
<h2>Services</h2>
</div>
<div class="section section-4" id="contact">
<h2>Contact</h2>
</div>

*{box-sizing: border-box}
	
body{

margin: 0;
color: #111;
	
}


main{ 

	 height: 100vh;
  overflow-y: auto;
scroll-behavior: smooth;
scroll-snap-type: y mandatory;
-webkit-overflow-scrolling: touch;
	
	}
	
	
.demo-nav{
	
position:fixed;
top: 0;
z-index: 1;
left:0;
right:0;
 
}
	
.demo-nav ul {
margin: 0;
padding: 0;
list-style-type: none;
display: flex;
width: 100%;
justify-content: center;
	
}
	
.demo-nav li {
 
  padding: 1rem;
}
	
.demo-nav a {
	
display:grid;
font-size:1.25rem;
text-decoration: none;
color:currentColor;
row-gap: 100%;
overflow: hidden;
transition: row-gap .4s;
grid-template-rows: 1fr 4px;
	
}
	
.demo-nav ul li a::after {
content: '';
height: 50%;
background-color: currentcolor;
}
	
.demo-nav ul li a:hover {
	
row-gap: 0;
	
}

	
.section {
display:grid;
place-items:center;
height: 100vh;
background-color: #70ebcf;
scroll-snap-align: start;
	
}

h2 {

text-transform: uppercase;
font-size: 2rem;
 

}

	
.section-1 {
background:#e67c7c
}
.section-2 {
background:#8d8dea
}
.section-3 {
background:#f2f268
}
	
.section-4 {
background:#9ceda2
}	
    

Support navigateurs :

CSS Scroll Snap