Görgetés-bepattintás-igazítás - CSS-trükkök

Anonim

scroll-snap-aligna CSS Scroll Snap modul része. A görgetés bepattintása a nézet pozíciójának „rögzítésére” utal az oldal egyes elemeihez, amikor az ablak (vagy egy görgethető tároló) görgetésre kerül. Gondoljon egy görgetésre kattintó tárolóra, például mágnest rakjon egy elem tetejére, amely a nézetablak tetejére tapad, és arra kényszeríti az oldalt, hogy hagyja abba a görgetést.

scroll-snap-aligna görgetés-csattanó tárolón belüli görgetés-bepattanó elem szükséges tulajdonság. A görgetéssel bepattintható tárolókkal kapcsolatos további információkért lásd az scroll-snap-typealmanach bejegyzést. scroll-snap-alignmegmondja a böngésző, amely része egy elem kell igazítani, amikor egy pillanat alatt pontot talál: Amennyiben az elem beépülő az start, centervagy enda szülő konténer, amely tartalmazza az scroll-snap-typeingatlan?

Ha azt akarja, hogy egy elem az elem elején rögzüljön, adjon neki egy ilyen scroll-snap-alignértéket:

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

Szintaxis

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

Legfeljebb 2 értéket adhat meg ennek a tulajdonságnak, amelyek a blokk és az inline tengelyeket képviselik. Ha csak 1 értéket ad meg, akkor ez az érték mindkét tengelyhez használható lesz.

Értékek

scroll-snap-align a következő értékeket fogadja el:

  • none letiltja az elem görgetését
  • start az elem kezdetét a görgetéstároló snapportjához igazítja, amikor a helyére kerül
  • end amikor az elem végét a helyére pattintja, összehangolja az elem végét a görgetéstároló snapportjával
  • center amikor az elem a helyére kerül, az elem közepét a görgetőtároló snapportjához igazítja

Példa

Böngésző támogatás

Ez a böngésző támogatási adat a Caniuse cégtől származik, amely részletesebben szerepel. Egy szám azt jelzi, hogy a böngésző támogatja az adott és újabb verziók szolgáltatásait.

Asztal

Króm Firefox AZAZ Él Szafari
69 68 11 * 79 11.

Mobil / Tablet

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

Összefüggő

  • scroll-snap-type
  • scroll-margin
  • scroll-padding
  • scroll-snap-stop

Erőforrások

  • CSS Scroll Snap W3C jelöltajánlás
  • Praktikus CSS Scroll Snapping
  • Bemutatjuk a CSS Scroll Snap Pontokat