Tatal-snap-berhenti - Trik CSS

Anonim

scroll-snap-stopadalah 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-stopadalah sifat pilihan untuk elemen scroll-snapping dalam bekas scroll-snapping. Untuk maklumat lebih lanjut mengenai bekas penggulung tatal lihat scroll-snap-typeentri almanak.

scroll-snap-stopmembolehkan anda memaksa bekas gulungan bergulir ke elemen tertentu. Katakan anda menatal di dalam bekas gulung gulung, dan anda memberikannya putaran roda gigi raksasa. Pada kebiasaannya, penyemak imbas membiarkan kelajuan tatal menatal anda melepasi titik snap sehingga menetap pada titik snap dekat tempat pengguliran biasanya berakhir. Dengan menetapkan scroll-snap-stopanda boleh memberitahu penyemak imbas bahawa ia mesti berhenti pada elemen tertentu sebelum membenarkan pengguna melewatinya.

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

Sintaks

scroll-snap-stop: normal | always;

Nilai

scroll-snap-stop menerima nilai berikut:

  • normal adalah nilai lalai dan membolehkan elemen ditatal lalu tanpa tersentak
  • always akan memaksa penyemak imbas untuk masuk ke elemen ini, walaupun tatal tatal biasanya melewati elemen ini

Contohnya

Lihat contoh scroll-snap-stop Pen
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

Perhatikan bahawa Chrome mungkin tidak menyokong scroll-snap-stop: always;pada masa ini.

Berkaitan

  • scroll-snap-type
  • scroll-margin
  • scroll-padding
  • scroll-snap-align

Sumber

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