Scroll-snap-stop - Trik CSS

Anonim

scroll-snap-stopadalah 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-stopadalah properti opsional untuk elemen scroll-snapping dalam wadah scroll-snapping. Untuk informasi lebih lanjut tentang scroll-snapping containers, lihat scroll-snap-typeentri almanak.

scroll-snap-stopmemungkinkan Anda untuk memaksa wadah penggulung gulir untuk mengait ke elemen tertentu. Misalkan Anda sedang menggulir di dalam wadah penggulung gulir, dan Anda memberinya putaran roda mouse raksasa. Biasanya, browser akan membiarkan kecepatan pengguliran Anda melewati titik-titik jepret sampai itu menetap pada titik jepret yang dekat dengan tempat pengguliran biasanya berakhir. Dengan menyetel, scroll-snap-stopAnda dapat memberi tahu browser bahwa ia harus berhenti pada elemen tertentu sebelum mengizinkan pengguna melewatinya.

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

Sintaksis

scroll-snap-stop: normal | always;

Nilai

scroll-snap-stop menerima nilai-nilai berikut:

  • normal adalah nilai default dan memungkinkan elemen untuk digulir melewati tanpa putus
  • always akan memaksa browser untuk meng-snap ke elemen ini, meskipun biasanya scroll melewati elemen ini

Contoh

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

Perhatikan bahwa Chrome mungkin tidak mendukung scroll-snap-stop: always;saat ini.

Terkait

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

Sumber daya

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