CSS Academy · Pelajaran

scroll-snap-type dan scroll-snap-align

Buat pengalaman pengguliran carousel dan berpaginasi dengan properti CSS scroll snap.

scroll-snap-type dan scroll-snap-align adalah pelajaran CSS Academy gratis di CoddyKit. Ini adalah pelajaran 3 dari 4. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar CSS Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus CSS Academy mencakup 4 pelajaran total.

Apa Itu CSS Scroll Snap?

CSS Scroll Snap memungkinkan wadah yang dapat digulir untuk "mengunci" ke posisi tertentu setelah pengguliran, sehingga menciptakan perilaku paginasi dan karusel yang terkontrol tanpa JavaScript.

scroll-snap-type pada Wadah

Aktifkan penguncian pada wadah yang dapat digulir:

  <div class="carousel">
    <div class="item">1</div><div class="item">2</div><div class="item">3</div>
  </div>

Nilai scroll-snap-type

Terdiri atas dua bagian:

Sumbu: x, y, atau both
Tingkat ketegasan: mandatory (selalu mengunci) atau proximity (mengunci saat dekat dengan titik penguncian)

  <div class="paged">Paged container</div>
  <div class="freeform">Freeform container</div>

scroll-snap-align pada Item

Tentukan posisi setiap elemen anak saat mengunci di dalam wadah:

  <div class="carousel-demo">
    <div class="carousel-item">1</div><div class="carousel-item">2</div>
  </div>

Penguncian Halaman Layar Penuh

Tata letak bagian layar penuh dengan paginasi vertikal:

  <div class="sections">
    <div class="section">Section 1</div><div class="section">Section 2</div>
  </div>

Penguncian Karusel Horizontal

Karusel kartu horizontal dengan penguncian:

  <div class="carousel">
    <div class="card">Card 1</div><div class="card">Card 2</div><div class="card">Card 3</div>
  </div>

scroll-snap-stop

scroll-snap-stop: always mencegah pengguliran cepat melewati titik penguncian. Pengguna tidak dapat melewati lebih dari satu item dalam setiap gestur pengguliran.

  <div class="slider">
    <div class="slide">1</div><div class="slide">2</div>
  </div>

scroll-snap-margin dan scroll-padding

Beri offset pada posisi penguncian di item (scroll-margin) atau pada wadah (scroll-padding):

  <div class="carousel">Carousel container</div>

overscroll-behavior

overscroll-behavior: contain mencegah pengguliran berantai — saat wadah mencapai batas penggulungannya, halaman juga tidak ikut menggulir:

  <div class="modal-body">Line 1<br>Line 2<br>Line 3<br>Line 4<br>Line 5<br>Line 6</div>

Pertimbangan Aksesibilitas

Karusel dengan penguncian tetap harus dapat dinavigasi menggunakan papan ketik. Tombol panah harus memindahkan pengguna di antara titik penguncian. Tambahkan peran dan label karusel ARIA. Pengguliran terprogram melalui JavaScript harus mengikuti titik penguncian yang sama.

Karusel CSS vs JS

CSS Scroll Snap menangani sebagian besar kebutuhan karusel dasar tanpa JavaScript: penguncian ke titik, penyembunyian bilah gulir, dan perataan padding. Gunakan pustaka JS jika Anda memerlukan indikator titik, tombol sebelumnya/berikutnya dengan transisi beranimasi, atau pengelolaan aksesibilitas yang kompleks.

Pemeriksaan Singkat

Nilai scroll-snap-type mana yang memastikan wadah selalu berhenti tepat pada titik penguncian, tidak pernah di antaranya?

Ringkasan

CSS Scroll Snap membuat perilaku paginasi dan karusel. Tetapkan scroll-snap-type: x mandatory pada wadah dan scroll-snap-align: start pada item. Gunakan scroll-snap-stop: always untuk mencegah item terlewati. Gabungkan dengan overscroll-behavior: contain untuk mencegah pengguliran berantai. Sembunyikan bilah gulir dengan scrollbar-width: none agar tampilan lebih rapi.

Pertanyaan yang Sering Diajukan

Apakah pelajaran “scroll-snap-type dan scroll-snap-align” gratis?

Ya — teks lengkap “scroll-snap-type dan scroll-snap-align” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus CSS Academy, upgrade ke CoddyKit PRO. Kursus CSS Academy mencakup 4 pelajaran total.

Apa yang akan aku pelajari di “scroll-snap-type dan scroll-snap-align”?

Buat pengalaman pengguliran carousel dan berpaginasi dengan properti CSS scroll snap. Kamu berlatih CSS Academy dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.

Apakah aku perlu pengalaman untuk memulai CSS Academy?

Tidak diperlukan pengalaman sebelumnya. CSS Academy di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 3 dari 4.

Berapa lama pelajaran “scroll-snap-type dan scroll-snap-align” memakan waktu?

Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.

Bisakah aku menulis dan menjalankan kode dalam pelajaran CSS Academy ini?

Ya. Setiap pelajaran CSS Academy menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.

Semua pelajaran dalam kursus ini

overflow: hidden scroll auto clip
scroll-behavior: smooth
scroll-snap-type dan scroll-snap-align
Penataan Bilah Gulir dengan ::-webkit-scrollbar

← Kembali ke CSS Academy