Pomicanje-margina - CSS-trikovi

Anonim

scroll-margindio 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-marginje neobavezno svojstvo za element za pomicanje pomicanja unutar spremnika za pomicanje pomicanja. Za više informacija o pomičnim spremnicima pogledajte scroll-snap-typeunos almanaha.

Unesite marginu pomicanja

scroll-marginkoristi se za podešavanje područja uslikavanja elementa (okvir koji definira gdje će element biti priskočen). Dodavanje scroll-marginje korisno kada elementu trebate dati prostor od ruba spremnika kada se zaskoči na svoje mjesto, ali uzimajući u obzir situacije u kojima bi svakom elementu trebali malo drugačiji razmaci. Ako svi elementi imaju iste zahtjeve za razmakom, razmislite o upotrebi scroll-paddingna nadređenom spremniku, scroll-marginjer to utječe na razmak za sve elemente u spremniku.

Jednostavan primjer gdje scroll-margindopušta razmak od 50 piksela oko vrha i lijeve strane elementa izgleda ovako:

.scroll-element ( scroll-margin: 50px 0 0 50px; )
Ružičasto područje predstavlja scroll-marginovaj element.

Sintaksa

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

Važna napomena o Longhandovima: Chrome (a možda i drugi preglednici) trenutno ne podržavaju longhand format scroll-paddingi scroll-marginsvojstva. Koristite stenografiju za maksimalnu podršku preglednika. Pogledajte ovaj problem na programu chromium bug tracker za više detalja i trenutni status.

Vrijednosti

scroll-marginprihvaća sljedeće duljine vrijednost, koja je napisana slično margini drugim svojstvima, gdje se vrijednost može definirati s jedinicama ( px, em, vh, itd). Pogledajte modul Vrijednosti i jedinice W3C za više informacija. Postoci se ne mogu koristiti scroll-marginprema specifikaciji.

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