Slinkties užpildymas - CSS-gudrybės

Anonim

scroll-paddingyra CSS „Scroll Snap“ modulio dalis. Slinkties užfiksavimas reiškia peržiūros srities „užrakinimą“ tam tikriems puslapio elementams, kai slenkamas langas (arba slenkamas konteineris). Pagalvokite apie slinkimo spragtelėjimą, pavyzdžiui, ant elemento, kuris prilimpa prie peržiūros srities viršaus ir priverčia puslapį nustoti slinkti tiesiai, ant magneto.

scroll-paddingyra pasirinktinė bet kurio slinkimo konteinerio ypatybė. Kontroliniai slinkimo konteineriai apibrėžiami, kai scroll-snap-typenuosavybei nustatoma bet kokia vertė be jų none. Norėdami gauti daugiau informacijos apie slinkimo konteinerius, žr. scroll-snap-typeAlmanacho įrašą.

Gerai, todėl pereikite prie slinkties užpildymo

scroll-paddingnaudojamas koreguojančio konteinerio optimaliam peržiūros regionui koreguoti. Tai naudinga, jei talpykloje yra elementų, tokių kaip fiksuota antraštė, kuri uždengtų elementus viduje, arba jei slenkamam konteineriui reikia šiek tiek vietos, kad interjero elementai galėtų kvėpuoti, kai tik jie bus „užfiksuoti“.

Paprastas pavyzdys būtų naudojimas scroll-paddingkuriant fiksuotą tarpą 50pxkonteinerio viršuje ir kairėje:

.scroll-container ( scroll-padding: 50px 0 0 50px; )
Rožinės spalvos sritys rodo slinkties užklijavimo konteinerio užklotą.

Sintaksė

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

Svarbi pastaba dėl ilgų rankų: „ Chrome“ šiuo metu nepalaiko ilgų rankų formato scroll-paddingir scroll-marginypatybių. Norėdami gauti maksimalų naršyklės palaikymą, naudokite trumpinį. Jei norite gauti daugiau informacijos ir dabartinę būseną, žr. Šią problemą chromo klaidų stebėjimo priemonėje.

Vertybės

scroll-padding priima šias vertes:

  • autopalieka užpildymą nustatyti naršyklei / vartotojo agentui. Paprastai tai reiškia 0 taškų reikšmę, tačiau gali būti ne nulis, jei vartotojo agentas nusprendžia, kad kita vertė yra tinkamesnė.
  • yra parašyta panašus į paddingir kitas savybes, kai vertė gali būti apibrėžtas su vienetų ( px, em, vh, ir tt) arba kaip paties konteinerio procentais.

Pavyzdys

Žr.
„CSS-Tricks“ („@ css-tricks“) „Pen“ slinkimo užpildymo pavyzdį „CodePen“.

Naršyklės palaikymas

Šie naršyklės palaikymo duomenys yra iš „Caniuse“, kuri turi daugiau informacijos. Skaičius rodo, kad naršyklė palaiko šios ir naujesnės versijos funkciją.

Darbalaukis

„Chrome“ „Firefox“ T.Y Briauna „Safari“
69 68 11 * 79 11

Mobilusis / planšetinis kompiuteris

„Android Chrome“ „Android Firefox“ „Android“ „iOS Safari“
88 85 81 11.0-11.2

Susijęs

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

Ištekliai

  • CSS „Scroll Snap W3C“ kandidato rekomendacija
  • Praktinis CSS slinkties fiksavimas
  • Pristatome CSS slinkties taškus