Tatal-snap-sejajar - Trik CSS

Anonim

scroll-snap-alignadalah sebahagian daripada Modul Snap Scroll CSS. Scroll snapping merujuk pada "mengunci" posisi viewport ke elemen tertentu pada halaman ketika window (atau container yang dapat digulir) digulir. Fikirkan bekas penggulung tatal seperti meletakkan magnet di atas elemen yang melekat di bahagian atas ruang pandang dan memaksa halaman berhenti menatal di sana.

scroll-snap-alignadalah harta yang diperlukan untuk elemen scroll-snapping dalam bekas scroll-snapping. Untuk maklumat lebih lanjut mengenai bekas penggulung tatal lihat scroll-snap-typeentri almanak. scroll-snap-alignmemberitahu pelayar yang sebahagian daripada elemen yang perlu sejajar apabila titik snap yang dihadapi: Should unsur snap kepada start, centeratau endbekas induk yang mengandungi scroll-snap-typeharta?

Sekiranya anda mahu elemen terpasang pada awal elemen itu, berikan scroll-snap-alignnilai seperti itu:

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

Sintaks

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

Anda boleh menentukan hingga 2 nilai untuk harta ini, masing-masing mewakili sumbu blok dan sebaris. Sekiranya anda hanya memberikan 1 nilai, nilai itu akan digunakan untuk kedua-dua paksi.

Nilai

scroll-snap-align menerima nilai berikut:

  • none melumpuhkan gegaran skrol pada elemen
  • start menyelaraskan permulaan elemen dengan snapport bekas tatal ketika terpasang pada tempatnya
  • end menyelaraskan hujung elemen dengan snapport bekas tatal ketika terpasang pada tempatnya
  • center menyelaraskan pusat elemen dengan snapport bekas tatal ketika terpasang pada tempatnya

Contohnya

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

Sumber

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