scroll-marginje del modula za pomikanje po pomika CSS. Hitro drsenje se nanaša na "zaklepanje" položaja vidnega polja na določene elemente na strani, ko se pomika okno (ali pomični vsebnik). Zamislite si vsebnik za pomikanje, kot da bi magnet postavili na element, ki se drži vrha vidnega polja in prisilil stran, da se tam neha pomikati.
scroll-marginje neobvezna lastnost elementa za pomikanje v pomičnem vsebniku. Za več informacij o pomičnih posodah glejte scroll-snap-typevnos almanaha.
Vnesite drsni rob
scroll-marginse uporablja za prilagoditev območja zaskočitve elementa (polje, ki določa, kam bo element zaskočen). Dodajanje scroll-marginje koristno, če morate elementu dati prostor od roba vsebnika, ko je zaskočen na svoje mesto, vendar dopušča situacije, ko bo vsak element morda potreboval nekoliko drugačen razmik. Če imajo vsi elementi enake zahteve glede razmika, razmislite scroll-paddingo uporabi na nadrejenem vsebniku namesto, scroll-marginker to vpliva na razmik za vse elemente v vsebniku.
Preprost primer, kjer scroll-margindovoljuje razmik 50 px okoli vrha in leve strani elementa, je videti takole:
.scroll-element ( scroll-margin: 50px 0 0 50px; )
scroll-marginta 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);Pomembna opomba o dolgoročnih oblikah: Chrome (in morda tudi drugi brskalniki) trenutno ne podpirajo dolgoročnega zapisa scroll-paddingin scroll-marginlastnosti. Uporabite okrajšavo za največjo podporo brskalnika. Za več podrobnosti in trenutno stanje glejte to težavo na sledilniku napak Chrome.
Vrednote
scroll-marginsprejema naslednji dolžine vrednost, ki je napisan podobnih marginin druge lastnosti, če se vrednost lahko opredelimo z enotami ( px, em, vhitd). Za več informacij glejte modul Vrednosti in enote W3C. Odstotkov ni mogoče uporabiti za scroll-marginspecifikacijo.
Primer
Oglejte si primer oblazinjenja
z drsnikom Pen s strani CSS-Tricks (@ css-tricks) na CodePen.
Podpora za brskalnik
Ti podatki o podpori brskalnika so od Caniuse, ki vsebuje več podrobnosti. Številka pomeni, da brskalnik podpira to funkcijo v tej različici ali novejši.
Namizje
| Chrome | Firefox | IE | Rob | Safari |
|---|---|---|---|---|
| 69 | 68 | 11 * | 79 | 11. |
Mobilni / tablični računalnik
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 81 | 11,0-11,2 |
Sorodno
scroll-snap-typescroll-marginscroll-snap-alignscroll-snap-stop
Viri
- Priporočilo kandidata za pomikanje po CSS W3C
- Praktično CSS Scroll Snapping
- Predstavljamo točke pomikanja CSS