CSS Academy · Pelajaran

scroll-snap-type dan scroll-snap-align

Cipta pengalaman penatalan karusel dan pemetikan halaman dengan sifat CSS scroll snap.

Pelajaran 3 daripada 413 langkah

scroll-snap-type dan scroll-snap-align ialah pelajaran CSS Academy percuma di CoddyKit. Ini ialah pelajaran 3 daripada 4. Anda boleh membaca keseluruhan pelajaran di bawah secara percuma — kemudian berlatih secara praktikal dalam pelayar menggunakan penyunting kod terbina dalam dan tutor kecerdasan buatan 24/7. Pelajaran ini merupakan sebahagian daripada laluan pembelajaran CSS Academy, dan kemajuan anda disegerakkan merentas web serta aplikasi CoddyKit. Kursus CSS Academy merangkumi sejumlah 4 pelajaran.

Apakah CSS Lekapan Skrol?

CSS Lekapan Skrol membolehkan bekas boleh tatal "melekap" pada kedudukan tertentu selepas penatalan, lalu menghasilkan tingkah laku halaman dan karusel terkawal tanpa JavaScript.

scroll-snap-type pada Bekas

Dayakan lekapan pada bekas boleh tatal:

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

Nilai scroll-snap-type

Terdapat dua bahagian:

Paksi: x, y atau both
Ketegasan: mandatory (sentiasa melekap) atau proximity (melekap apabila hampir dengan titik lekapan)

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

scroll-snap-align pada Item

Tentukan tempat setiap elemen anak melekap dalam bekas:

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

Lekapan Halaman Skrin Penuh

Reka letak bahagian skrin penuh dengan penatalan menegak mengikut halaman:

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

Lekapan Karusel Mendatar

Karusel kad mendatar dengan lekapan:

  <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 menghalang penatalan pantas daripada melangkau titik lekapan. Pengguna tidak boleh melangkau lebih daripada satu item bagi setiap gerak isyarat penatalan.

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

scroll-snap-margin dan scroll-padding

Laraskan kedudukan lekapan pada item (scroll-margin) atau pada bekas (scroll-padding):

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

overscroll-behavior

overscroll-behavior: contain menghalang rantaian penatalan — apabila bekas mencapai sempadan penatalannya, halaman juga tidak akan menatal:

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

Pertimbangan Kebolehcapaian

Karusel lekapan masih perlu boleh dinavigasi menggunakan papan kekunci. Kekunci anak panah perlu menggerakkan pengguna antara titik lekapan. Tambahkan peranan dan label karusel ARIA. Penatalan terprogram melalui JavaScript perlu mematuhi titik lekapan yang sama.

Karusel CSS berbanding JavaScript

Lekapan skrol CSS mengendalikan kebanyakan keperluan karusel asas tanpa JavaScript: lekapan automatik, penyembunyian bar skrol dan penjajaran padding. Gunakan pustaka JS apabila anda memerlukan penunjuk titik, butang sebelumnya/seterusnya dengan peralihan beranimasi atau pengurusan kebolehcapaian yang kompleks.

Semakan Pantas

Nilai scroll-snap-type manakah yang memastikan bekas sentiasa berhenti tepat pada titik lekapan dan tidak pernah berhenti di antaranya?

Jawab dalam pelajaran interaktif

Rumusan

Lekapan Skrol CSS menghasilkan tingkah laku halaman dan karusel. Tetapkan scroll-snap-type: x mandatory pada bekas dan scroll-snap-align: start pada item. Gunakan scroll-snap-stop: always untuk menghalang lompatan. Gabungkan dengan overscroll-behavior: contain untuk menghalang rantaian penatalan. Sembunyikan bar skrol dengan scrollbar-width: none untuk penampilan yang kemas.

Percuma untuk bermula

Pelajari CSS dengan tutor kecerdasan buatan — percuma

Tulis dan jalankan kod sebenar dalam pelayar anda, dapatkan bantuan segera daripada tutor kecerdasan buatan yang tersedia 24/7, dan sambung semula dari tempat anda berhenti di web atau dalam aplikasi.

Kursus: 40
Pelajaran: 159

Mula belajar secara percuma Lihat kursus penuh

Soalan Lazim

Adakah pelajaran “scroll-snap-type dan scroll-snap-align” percuma?

Ya — teks penuh “scroll-snap-type dan scroll-snap-align” boleh dibaca secara percuma di web ini. Untuk berlatih secara interaktif menggunakan penyunting kod terbina dalam dan tutor kecerdasan buatan 24/7, serta membuka kunci baki kursus CSS Academy, tingkat taraf kepada CoddyKit PRO. Kursus CSS Academy merangkumi sejumlah 4 pelajaran.

Apakah yang akan saya pelajari dalam “scroll-snap-type dan scroll-snap-align”?

Cipta pengalaman penatalan karusel dan pemetikan halaman dengan sifat CSS scroll snap. Anda berlatih CSS Academy menggunakan kod praktikal yang dijalankan terus dalam pelayar, manakala tutor kecerdasan buatan 24/7 menjawab soalan anda semasa anda mengikuti pelajaran.

Adakah saya memerlukan pengalaman untuk memulakan CSS Academy?

Tiada pengalaman terdahulu diperlukan. Pembelajaran CSS Academy di CoddyKit disusun untuk pelajar daripada peringkat pemula hingga lanjutan, jadi anda boleh bermula di sini atau dari awal dan belajar mengikut kadar anda sendiri. Ini ialah pelajaran 3 daripada 4.

Berapa lamakah pelajaran “scroll-snap-type dan scroll-snap-align” diambil?

Kebanyakan pelajaran CoddyKit mengambil masa kira-kira 5–10 minit. Setiap pelajaran ringkas dan interaktif, jadi anda boleh membuat kemajuan secara berterusan dan menyambung tepat dari tempat anda berhenti di web atau aplikasi.

Bolehkah saya menulis dan menjalankan kod dalam pelajaran CSS Academy ini?

Ya. Setiap pelajaran CSS Academy menyertakan penyunting kod terbina dalam, jadi anda boleh menulis dan menjalankan kod sebenar terus dalam pelayar serta menerima maklum balas kecerdasan buatan serta-merta — tanpa memerlukan persediaan setempat.

Semua pelajaran dalam kursus ini

overflow: hidden scroll auto clip
scroll-behavior: smooth
scroll-snap-type dan scroll-snap-align
Penggayaan Bar Tatal dengan ::-webkit-scrollbar

← Kembali ke CSS Academy