Scroll-snap-align - Trik CSS

Anonim

scroll-snap-alignadalah bagian dari Modul Snap Gulir CSS. Scroll snapping mengacu pada "mengunci" posisi viewport ke elemen tertentu pada halaman saat jendela (atau wadah yang dapat digulir) di-scroll. Bayangkan wadah penggulung gulir seperti meletakkan magnet di atas elemen yang menempel di bagian atas area pandang dan memaksa laman berhenti menggulir di sana.

scroll-snap-alignadalah properti yang diperlukan untuk elemen scroll-snapping dalam wadah scroll-snapping. Untuk informasi lebih lanjut tentang scroll-snapping containers, lihat scroll-snap-typeentri almanak. scroll-snap-alignmemberitahu browser yang bagian dari elemen harus selaras ketika titik sekejap ditemui: Haruskah elemen snap ke start, centeratau enddari wadah induk yang berisi scroll-snap-typeproperti?

Jika Anda ingin elemen dipasang di awal elemen tersebut, berikan scroll-snap-alignnilai seperti ini:

/* Assuming this element is a child of a container with `scroll-snap-type` set */ .element ( scroll-snap-align: start; )

Sintaksis

scroll-snap-align: ( none | start | end | center )(1,2)

Anda dapat menentukan hingga 2 nilai untuk properti ini, masing-masing mewakili sumbu blok dan sebaris. Jika Anda hanya memberikan 1 nilai, nilai tersebut akan digunakan untuk kedua sumbu.

Nilai

scroll-snap-align menerima nilai-nilai berikut:

  • none menonaktifkan scroll snapping pada elemen
  • start menyelaraskan awal elemen dengan snapport wadah gulir saat dipasang pada tempatnya
  • end menyelaraskan ujung elemen dengan snapport wadah gulir saat dipasang ke tempatnya
  • center menyelaraskan pusat elemen dengan snapport wadah gulir saat dipasang ke tempatnya

Contoh

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-snap-type
  • scroll-margin
  • scroll-padding
  • scroll-snap-stop

Sumber daya

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