Drsni podstavek - CSS-triki

Anonim

scroll-paddingje 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-paddingje neobvezna lastnost za kateri koli pomični vsebnik. Vsebniki za pomikanje s pomikanjem so definirani, kadar je scroll-snap-typelastnost nastavljena na katero koli vrednost poleg none. Za več informacij o pomičnih posodah glejte scroll-snap-typevnos almanaha.

V redu, zato nadaljujte z oblazinjenjem

scroll-paddingse uporablja za prilagajanje optimalnega območja gledanja posode za zaskočitev. To je uporabno, če ima vsebnik elemente, kot je fiksna glava, ki zakriva elemente v notranjosti, ali če pomični vsebnik potrebuje nekaj prostora, da lahko notranji elementi dajo prostor za dihanje, ko so "zaskočeni" na svoje mesto.

Preprost primer bi bil scroll-paddingustvariti določen razmik 50pxna vrhu in levi strani vsebnika:

.scroll-container ( scroll-padding: 50px 0 0 50px; )
Območja v roza barvi prikazujejo oblazinjenje drsnika na vsebniku za pomikanje.

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

Pomembna opomba o Longhands: Chrome trenutno ne podpira formatov 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-padding sprejema naslednje vrednosti:

  • autodovoli, da oblazinjenje določi brskalnik / uporabniški agent. Na splošno to pomeni vrednost 0px, vendar lahko ni nič, če se uporabniški agent odloči, da je druga vrednost primernejša.
  • je napisan podobnih paddingin druge lastnosti, če se vrednost lahko definiran z enotami ( px, em, vhitd) ali kot odstotek samega vsebnika.

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-type
  • scroll-margin
  • scroll-snap-align
  • scroll-snap-stop

Viri

  • Priporočilo kandidata za pomikanje po CSS W3C
  • Praktično CSS Scroll Snapping
  • Predstavljamo točke pomikanja CSS