<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <section>1</section> <section>2</section> <section>3</section> <section>4</section> <section>5</section> </div>

.container { width: 100%; height: 100vh; overflow: auto; overflow-y: scroll; scroll-snap-points-y: repeat(100vh); scroll-snap-type: y mandatory; will-change: scroll-snap-type; } section { /* position: sticky; top: 0; */ display: flex; align-items: center; justify-content: center; scroll-snap-align: start; width: 100%; height: 100vh; color: #FFF; background: black; scroll-snap-align: start; font-size: 20vw; &:nth-child(2n + 2){ color: black; background: yellow; } }