Kerimispolster - CSS-trikid

Anonim

scroll-paddingon osa CSS Scroll Snap moodulist. Kerimise klõpsamine viitab vaateakna asukoha lukustamisele lehe konkreetsetele elementidele, kui akent (või keritavat konteinerit) keritakse. Mõelge kerimisele klõpsatavale konteinerile, näiteks panete magneti elemendi otsa, mis jääb vaateakna ülaosale ja sunnib lehe sealsamas kerimise lõpetama.

scroll-paddingon valikuline omadus mis tahes kerimiseks klõpsatava konteineri jaoks. Kerimisel klõpsatavad konteinerid on määratletud alati, kui scroll-snap-typeatribuudile on määratud mõni muu väärtus none. Lisateavet kerimisnuppude klõpsamise kohta leiate scroll-snap-typealmanahhikirjest.

OK, nii et liigute edasi kerimis-polstriga

scroll-paddingkasutatakse reguleeritava mahuti optimaalse vaatamispiirkonna reguleerimiseks. See on kasulik, kui konteineris on selliseid elemente nagu fikseeritud päis, mis varjab elemente sees, või kui keritav konteiner vajab ruumi, et anda sisustuselementidele hingamisruumi, kui need on oma kohale “napsatud”.

Lihtne näide on konteineri üla- ja vasakpoolse scroll-paddingosa fikseeritud vahekauguse loomine 50px.

.scroll-container ( scroll-padding: 50px 0 0 50px; )
Roosad alad näitavad kerimise klõpsamise konteineri kerimist.

Süntaks

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

Oluline märkus pikkade käte kohta: Chrome ei toeta praegu käte vormindamist scroll-paddingja scroll-marginatribuute. Kasutage brauseri maksimaalseks toeks lühikirjandit. Lisateavet ja praegust olekut leiate kroomiveajälgijast.

Väärtused

scroll-padding aktsepteerib järgmisi väärtusi:

  • autojätab polsterduse brauseri / kasutajaagendi otsustada. Üldiselt tähendab see väärtust 0px, kuid võib olla nullist erinev, kui kasutajaagent otsustab, et mõni muu väärtus on sobivam.
  • kirjutatakse sarnaseid paddingja muid omadusi, kui väärtus saab määratleda ühikut ( px, em, vhjne) või protsendina mahuti enda.

Näide

Vaadake
CodeSenil CSS-Tricksi (@ css-tricks) pliiatsi kerimispildi näidet.

Brauseri tugi

Need brauseri tugiandmed pärinevad Caniuse'ilt, millel on üksikasjalikum teave. Number näitab, et brauser toetab selle versiooni ja uuemat funktsiooni.

Töölaud

Chrome Firefox IE Edge Safari
69 68 11 * 79 11

Mobiil / tahvelarvuti

Android Chrome Android Firefox Android iOS-i Safari
88 85 81 11.0-11.2

Seotud

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

Ressursid

  • CSS Scroll Snap W3C kandidaatide soovitus
  • Praktiline CSS-i kerimise napsutamine
  • Tutvustame CSS-i kerimispunkte