<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="scroll-container"> <div class="scroll-area">Section 1</div> <div class="scroll-area">Section 2</div> <div class="scroll-area">Section 3</div> <div class="scroll-area">Section 4</div> </div>

body { background: lightgrey; } .scroll-container, .scroll-area { width: 1000px; height: 500px; font-size: 60px; } .scroll-container { overflow-x: hidden; overflow-y: scroll; scroll-snap-type: y mandatory; } .scroll-area { scroll-snap-align: start; } .scroll-container, .scroll-area { margin: 0 auto; } .scroll-area { display: flex; align-items: center; justify-content: center; color: white; } /*warna buat div section*/ .scroll-area:nth-of-type(1) { background: #49b293; } .scroll-area:nth-of-type(2) { background: #c94e4b; } .scroll-area:nth-of-type(3) { background: #4cc1be; } .scroll-area:nth-of-type(4) { background: #8360A6; }