Tatal-snap-jenis - Trik CSS

Anonim

Properti scroll-snap-typeini adalah sebahagian daripada Modul Snap Scroll CSS. Scroll snapping merujuk kepada "mengunci" posisi viewport ke elemen-elemen tertentu di halaman ketika tetingkap (atau bekas yang boleh digulir) ditatal. Fikirkan seperti meletakkan magnet di atas elemen yang melekat di bahagian atas ruang pandang dan memaksa halaman untuk berhenti menatal di sana.

Ini berguna jika anda mahu menghentikan penyemak imbas pada titik tertentu di halaman. Contohnya: Seorang pengguna yang melayari galeri foto mungkin tidak mahu menatal setengah gambar - mereka lebih suka gambar "snap" ke kedudukan yang betul semasa mereka menatal. Scroll snapping memberi pemaju cara CSS yang murni untuk menangani tingkah laku ini.

scroll-snap-typeadalah harta yang diperlukan pada mana-mana bekas yang boleh ditatal yang ingin anda tambah skrol. Ia menjawab tiga soalan untuk bekas tatal:

  1. Adakah bekas menggunakan gulungan bergulir?
  2. Pada paksi - x (mendatar), y (menegak), blok, atau sebaris - yang manakah tatal gulir berlaku?
  3. Bagaimana tingkah laku scroll snapping? Adakah terpaksa 100% dari waktu, atau hanya berlaku apabila pengguna "cukup dekat" ke posisi snap? Lebih lanjut mengenai ini kemudian.
.scroll-container ( /* Always force (mandatory) scrolling to a snap point on the y-axis */ scroll-snap-type: y mandatory; )

Sintaks

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

Nilai

scroll-snap-type menerima nilai berikut:

  • none melumpuhkan gegaran skrol.
  • x membolehkan tatal menjentik di sepanjang paksi-x sahaja.
  • y membolehkan tatal tersentak di sepanjang paksi-y sahaja.
  • block membolehkan tatal tersentak di sepanjang paksi blok sahaja.
  • inline membolehkan tatal tersentak di sepanjang paksi sebaris sahaja.
  • bothmembolehkan tatal tersentak di sepanjang kedua paksi (yang boleh anda fikirkan sebagai xdan y, atau inlinedan block.
  • mandatory adalah nilai ketegasan yang memberitahu penyemak imbas untuk selalu pergi ke posisi snap apabila tidak berlaku tatal.
  • proximityadalah nilai ketegasan yang memberitahu penyemak imbas untuk pergi ke kedudukan snap jika tindakan menatal hampir hampir dengan kedudukan snap. Sekiranya tidak cukup dekat, penyemak imbas tidak boleh tersekat dan tatal akan berlaku seperti biasa.

Contohnya

Lihat contoh pen-tatal-pena
oleh CSS-Tricks (@ css-tricks) di CodePen.

Sokongan Penyemak Imbas

Data sokongan penyemak imbas ini berasal dari Caniuse, yang mempunyai lebih terperinci. Nombor menunjukkan bahawa penyemak imbas menyokong ciri pada versi dan ke atas.

Desktop

Chrome Firefox IE Hujung Safari
69 68 11 * 79 11

Mudah Alih / Tablet

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

Berkaitan

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

Sumber

  • Cadangan Calon CSS Scroll Snap W3C
  • Tangkapan Tatal CSS Praktikal
  • Memperkenalkan CSS Scroll Snap Points