Görgető margó - CSS-trükkök

Anonim

scroll-margina 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-margina görgetés-bepattintási elem opcionális tulajdonsága. A görgetéssel bepattintható tárolókkal kapcsolatos további információkért lásd az scroll-snap-typealmanach bejegyzést.

Írja be a görgetési margót

scroll-marginaz elem bepattintási területének (az a mező, amely meghatározza, hogy hova kerül az elem bepattintása) beállítására szolgál. A hozzáadás scroll-marginakkor hasznos, ha az elemnek helyet kell adnia a tároló szélétől, amikor a helyére kerül, de lehetővé teszi azokat a helyzeteket, amikor az egyes elemek kissé eltérő távolságra szorulhatnak. Ha minden elemnek ugyanazok a térköz követelményei, fontolja scroll-paddingmeg a szülőtároló használatát, scroll-marginmivel ez befolyásolja a tároló összes elemének távolságát.

Egy egyszerű példa arra, hogy az scroll-marginelem felső és bal oldali 50 képpontos távolságának megengedése így néz ki:

.scroll-element ( scroll-margin: 50px 0 0 50px; )
A rózsaszínű terület jelöli az scroll-marginelemet.

Szintaxis

/* Shorthand */ scroll-margin: (1,4); /* Longhands */ scroll-margin-top: ; scroll-margin-right: ; scroll-margin-bottom: ; scroll-margin-left: ; /* inline-specific and block-specific properties as well */ scroll-margin-block: (1,2); scroll-margin-inline: (1,2);

Fontos megjegyzés a hosszúkézesekről: A Chrome (és esetleg más böngészők) jelenleg nem támogatja a hosszúkéz formátumot scroll-paddingés scroll-margintulajdonságokat. Használja a rövidítést a böngésző maximális támogatásához. További részletekért és az aktuális állapotért olvassa el ezt a kérdést a króm hibakeresőn.

Értékek

scroll-marginelfogadja a következő hossza értéket, ami meg van írva hasonló marginés egyéb tulajdonságait, ahol az érték lehet meghatározni egységekkel ( px, em, vhstb). További információkért lásd a W3C értékek és egységek modult. A százalékok nem használhatók scroll-margina specifikáció szerint.

Példa

Lásd a
CSS-Tricks (@ css-tricks) tollgördítő kitöltési 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-snap-type
  • 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