Pomicanje pomicanja - CSS-trikovi

Anonim

scroll-paddingdio je CSS modula za pomicanje pomicanja. Pomicanje pomicanja odnosi se na "zaključavanje" položaja okvira za prikaz za određene elemente na stranici dok se pomiče prozor (ili spremnik koji se može pomicati). Zamislite spremnik za pomicanje pomicanja poput stavljanja magneta na vrh elementa koji se lijepi za vrh okvira za prikaz i prisiljava stranicu da se zaustavi pomicanje upravo tamo.

scroll-paddingje neobavezno svojstvo za bilo koji spremnik za pomicanje. Spremnici za pomicanje pomicanjem definiraju se kad god je scroll-snap-typesvojstvo postavljeno na bilo koju vrijednost osim none. Za više informacija o pomičnim spremnicima pogledajte scroll-snap-typeunos almanaha.

U redu, idemo na dodavanje pomicanja

scroll-paddingkoristi se za podešavanje optimalnog područja gledanja spremnika za pucanje. To je korisno ako spremnik ima elemente kao što je fiksno zaglavlje koji bi zaklanjao elemente unutar njega ili ako pomični spremnik treba malo prostora kako bi unutarnji elementi imali prostora za disanje nakon što se "zaskoče" na svoje mjesto.

Jednostavan primjer bio bi korištenje scroll-paddingza stvaranje nekih fiksnih razmaka 50pxna vrhu i lijevo od spremnika:

.scroll-container ( scroll-padding: 50px 0 0 50px; )
Područja u ružičastoj prikazuju pomicanje klizača na spremniku za pomicanje pomicanjem.

Sintaksa

/* 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);

Važna napomena o longhandovima: Chrome trenutno ne podržava longhand format scroll-paddingi scroll-marginsvojstva. Koristite stenografiju za maksimalnu podršku preglednika. Pogledajte ovaj problem na tragaču za kromiranim programskim pogreškama za više detalja i trenutni status.

Vrijednosti

scroll-padding prihvaća sljedeće vrijednosti:

  • autoostavlja punjenje da određuje preglednik / korisnički agent. To općenito znači vrijednost 0px, ali može biti i nula ako korisnički agent odluči da je druga vrijednost prikladnija.
  • pisano Slično kao paddingi druga svojstva, gdje se vrijednost može definirati sa jedinicama ( px, em, vh,) ili kao postotak samog spremnika.

Primjer

Pogledajte primjer
dodavanja pomicanja olovke pomoću CSS-trikova (@ css-trikovi) na CodePenu.

Podrška preglednika

Podaci o podršci preglednika potječu iz tvrtke Caniuse, koja sadrži više detalja. Broj označava da preglednik podržava značajku u toj verziji i novijoj.

Radna površina

Krom Firefox IE Rub Safari
69 68 11 * 79 11

Mobitel / tablet

Android Chrome Android Firefox Android iOS Safari
88 85 81 11,0-11,2

Povezano

  • scroll-snap-type
  • scroll-margin
  • scroll-snap-align
  • scroll-snap-stop

Resursi

  • CSS Scroll Snap W3C preporuka kandidata
  • Praktično CSS pomicanje pomicanja
  • Predstavljamo CSS Scroll Snap Points