Görgetés-kitöltés - CSS-trükkök

Anonim

scroll-paddinga 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-paddingopcionális tulajdonság minden görgetés-bepattanó tárolóhoz. A görgetésre kattintó konténerek akkor kerülnek meghatározásra, ha a scroll-snap-typetulajdonságon kívül bármely más értékre van állítva none. A görgetéssel bepattintható tárolókkal kapcsolatos további információkért lásd az scroll-snap-typealmanach bejegyzést.

OK, így folytatjuk a görgetés kitöltését

scroll-paddinga bepattintható tároló optimális megtekintési régiójának beállítására szolgál. Ez akkor hasznos, ha a konténernek vannak olyan elemei, mint egy fix fejléc, amely eltakarja a belső elemeket, vagy ha a görgethető tartálynak némi helyre van szüksége ahhoz, hogy a belső elemek lélegezni tudjanak, miután a helyükre "bepattantak".

Egyszerű példa scroll-paddingegy állandó távolság létrehozása 50pxa tároló tetején és balján:

.scroll-container ( scroll-padding: 50px 0 0 50px; )
A rózsaszínű területek mutatják a tekercs-bepattintást a tekercs-bepattintott tárolón.

Szintaxis

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

Fontos megjegyzés a hosszúkézesekről: A Chrome 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-padding a következő értékeket fogadja el:

  • autoa kitöltést a böngésző / user-agent határozza meg. Általában ez 0px értéket jelent, de nem lehet nulla, ha a felhasználói ügynök úgy dönt, hogy egy másik érték megfelelőbb.
  • van írva hasonló paddingés egyéb tulajdonságait, ahol az érték lehet meghatározni egységekkel ( px, em, vh, stb), vagy százalékában a tartály maga is.

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