Slinkties paraštė - CSS-gudrybės

Anonim

scroll-marginyra 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-marginyra pasirenkama slinkimo elemento ypatybė slinkties spragtelėjimo talpykloje. Norėdami gauti daugiau informacijos apie slinkimo konteinerius, žr. scroll-snap-typeAlmanacho įrašą.

Įveskite slinkties paraštę

scroll-marginnaudojamas koreguoti elemento užfiksavimo sritį (langelį, kuriame nurodoma, kur bus užfiksuotas elementas). Pridėjimas scroll-marginyra naudingas, kai reikia užfiksuoti elemento erdvę nuo talpyklos krašto, kai jis užfiksuojamas vietoje, tačiau leidžiama situacijoms, kai kiekvienam elementui gali prireikti šiek tiek kitokio atstumo. Jei visiems elementams taikomi vienodi tarpų reikalavimai, apsvarstykite galimybę naudoti scroll-paddingpagrindiniame sudėtiniame rodinyje, o ne scroll-margintodėl, kad tai turi įtakos visų sudėtinio rodinio elementų tarpams.

Paprastas pavyzdys, kai scroll-margin50 taškų atstumas tarp elemento viršaus ir kairės atrodo taip:

.scroll-element ( scroll-margin: 50px 0 0 50px; )
Rausva sritis žymi scroll-marginšį elementą.

Sintaksė

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

Svarbi pastaba dėl ilgų rankų: „ Chrome“ (ir galbūt kitos naršyklės) š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-marginpriima taip ilgis verte, kuri yra parašyta panaši į marginir kitus objektus, kurių vertė gali būti apibrėžiama su vienetais ( px, em, vh, ir tt). Norėdami gauti daugiau informacijos, žr. „W3C Values ​​and Units“ modulį. Procentai negali būti naudojami pagal scroll-marginspecifikaciją.

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