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

Anonim

Az scroll-snap-typeingatlan a CSS Scroll Snap modul része. A görgetés bepattintása a nézetablak pozíciójának "rögzítésére" utal az oldal egyes elemeire, amikor az ablak (vagy egy görgethető tároló) görgetésre kerül. Gondoljon arra, mintha mágnest rakna egy elemre, amely a nézetablak tetejére tapad, és arra kényszeríti az oldalt, hogy hagyja abba a görgetést.

Ez akkor hasznos, ha le akarja állítani a böngészőt az oldal meghatározott pontjain. Például: A fotógalériát böngésző felhasználó valószínűleg nem akar félig elgördülni egy kép mellett - valószínűleg jobban szeretné, ha a kép görgetés közben a megfelelő pozícióba „pattan”. A görgetés bepattintása a fejlesztőknek tiszta CSS módot kínál a viselkedés kezelésére.

scroll-snap-typeminden olyan görgethető tároló kötelező tulajdonsága, amelyhez görgetési csattanót szeretne hozzáadni. Három kérdésre ad választ egy görgetőtárolóval kapcsolatban:

  1. A tároló használ görgetéses bepattintást?
  2. Melyik tengelyen - x (vízszintes), y (függőleges), blokkon vagy inline - kell alkalmazni a görgetéses bepattintást?
  3. Hogyan viselkedjen a görgetés bepattanása? 100% -ban kényszerítve van, vagy csak akkor lép életbe, ha a felhasználó „elég közel” kerül egy bepattanó pozícióhoz? Erről később.
.scroll-container ( /* Always force (mandatory) scrolling to a snap point on the y-axis */ scroll-snap-type: y mandatory; )

Szintaxis

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

Értékek

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

  • none letiltja a görgetés bepattintását.
  • x csak az x tengely mentén teszi lehetővé a görgetést.
  • y csak az y tengely mentén teszi lehetővé a görgetést.
  • block csak a blokktengely mentén teszi lehetővé a görgetést.
  • inline csak a beágyazott tengely mentén teszi lehetővé a görgetést.
  • bothlehetővé teszi a görgetést a két tengely mentén (amit gondolhat, és xés y, vagy inlineés block.
  • mandatory egy szigorúsági érték, amely megmondja a böngészőnek, hogy mindig gyors helyzetbe kerüljön, ha nem történik görgetés.
  • proximityegy szigorúsági érték, amely megmondja a böngészőnek, hogy egy snap pozícióba lépjen, ha egy görgetési művelet elég közel kerül a snap pozícióhoz. Ha nincs túl közel, akkor a böngészőnek nem szabad kattintania, és a görgetés rendesen fog viselkedni.

Példa

Lásd a
CSS-Tricks (@ css-tricks) Toll görgetés-bepattintás típusú példáját a CodePen-en.

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

Erőforrások

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