Scroll-snap-type - Trik CSS

Anonim

The scroll-snap-typeproperti adalah bagian dari CSS Gulir Snap Modul. Scroll snapping mengacu pada "mengunci" posisi viewport ke elemen tertentu pada halaman saat jendela (atau wadah yang dapat digulir) di-scroll. Anggap saja seperti meletakkan magnet di atas elemen yang menempel di bagian atas viewport dan memaksa laman berhenti bergulir di sana.

Ini berguna jika Anda ingin menghentikan browser pada titik-titik tertentu pada halaman. Misalnya: Pengguna yang menjelajahi galeri foto mungkin tidak ingin menggulir gambar setengah jalan - mereka mungkin lebih suka gambar "jepret" ke posisi yang tepat saat mereka menggulir. Scroll snapping memberi pengembang cara CSS murni untuk menangani perilaku ini.

scroll-snap-typeadalah properti wajib pada setiap wadah yang dapat digulir yang ingin Anda tambahi gulir gulir. Ini menjawab tiga pertanyaan untuk wadah gulir:

  1. Apakah container menggunakan scroll snapping?
  2. Pada sumbu mana - x (horizontal), y (vertikal), blok, atau sebaris - gertakan gulir harus diterapkan?
  3. Bagaimana seharusnya perilaku gulir gulir? Apakah itu dipaksa 100% dari waktu, atau apakah itu berlaku hanya ketika pengguna "cukup dekat" ke posisi jepret? Lebih lanjut tentang ini nanti.
.scroll-container ( /* Always force (mandatory) scrolling to a snap point on the y-axis */ scroll-snap-type: y mandatory; )

Sintaksis

scroll-snap-type: none | ( x | y | block | inline | both ) ( mandatory | proximity )

Nilai

scroll-snap-type menerima nilai-nilai berikut:

  • none menonaktifkan scroll snapping.
  • x mengaktifkan gulir yang menjentikkan sepanjang sumbu x saja.
  • y memungkinkan gulir menggigit sepanjang sumbu y saja.
  • block mengaktifkan scroll snapping di sepanjang sumbu blok saja.
  • inline memungkinkan gulir menggigit sepanjang sumbu sebaris saja.
  • bothmengaktifkan scroll snapping di sepanjang kedua sumbu (yang dapat Anda anggap sebagai xdan y, atau inlinedan block.
  • mandatory adalah nilai ketelitian yang memberi tahu browser untuk selalu beralih ke posisi jepret saat tidak ada pengguliran yang terjadi.
  • proximityadalah nilai keketatan yang memberi tahu browser untuk beralih ke posisi jepret jika tindakan pengguliran cukup dekat dengan posisi jepret. Jika tidak cukup dekat, browser seharusnya tidak terkunci dan pengguliran akan berjalan normal.

Contoh

Lihat contoh Pen scroll-snap-type
oleh CSS-Tricks (@ css-trick) di CodePen.

Dukungan Browser

Data dukungan browser ini berasal dari Caniuse, yang lebih detail. Angka menunjukkan bahwa browser mendukung fitur pada versi tersebut dan yang lebih baru.

Desktop

Chrome Firefox YAITU Tepi Safari
69 68 11 * 79 11

Ponsel / Tablet

Android Chrome Android Firefox Android iOS Safari
88 85 81 11.0-11.2

Terkait

  • scroll-padding
  • scroll-margin
  • scroll-snap-align
  • scroll-snap-stop

Sumber daya

  • Rekomendasi Kandidat CSS Scroll Snap W3C
  • Geser Gulir CSS Praktis
  • Memperkenalkan Poin Snap Gulir CSS