<main class="scroll-container">
	<section>
		<h2>Section 1</h2>
	</section>
	<section>
		<h2>Section 2</h2>
	</section>
	<section>
		<h2>Section 3</h2>
	</section>
	<section>
		<h2>Section 4</h2>
	</section>
</main>
* {
	box-sizing: border-box;
}

body {
	margin: 0;
	font-family: 'Helvetica', sans-serif;
}

/* All the snapping stuff */
.scroll-container {
	height: 100vh;
	overflow-y: scroll;
	scroll-snap-type: y mandatory;
}

section {
	height: 100vh;
	scroll-snap-align: center;
}

/* Other styles */
section {
	padding: 1rem;
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: darkorchid;
}

section:nth-child(2n) {
	background-color: turquoise;
}

section:nth-child(3n) {
	background-color: tomato;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.