Kode ini saya temukan di CodePen ketika sedang mempelajari fullpage.js. Ternyata hanya dengan CSS saja kita bisa memanfaatkan fungsi "snap". Tentunya tidak sekaya fitur yang menggunakan javascript, namun jika keperluan kita cukup dengan CSS saja, maka dengan menggunakan kode ini bisa membuat performa website anda lebih baik jika dibandingkan menggunakan javascript.
Untuk pengguna Oxygen Builder, cukup menambahkan element Code Block dan mengisi kode HTML dan CSS seperti contoh dibawah.
<div class="scroll-container"> <div class="scroll-area">1</div> <div class="scroll-area">2</div> <div class="scroll-area">3</div> <div class="scroll-area">4</div> </div>
Loading....scroll-container,
.scroll-area {
max-width: 100%;
height: 300px;
font-size: 60px;
}
.scroll-container {
overflow: auto;
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;
}
.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;
}
Referensi: https://codepen.io/tutsplus/pen/qpJYaK