Kerimisvaru - CSS-trikid

Anonim

scroll-marginon 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-marginon valikuline omadus kerimise klõpsamise elemendi jaoks kerimise klõpsamise konteineris. Lisateavet kerimisnuppude klõpsamise kohta leiate scroll-snap-typealmanahhikirjest.

Sisestage kerimisvaru

scroll-marginkasutatakse elemendi klõpsatusala (kast, mis määrab elemendi klõpsamise koha) reguleerimiseks. Lisamine scroll-marginon kasulik, kui peate paigale klõpsates andma mahuti servast elemendile ruumi, kuid võimaldades olukordi, kus iga elemendi jaoks võib vaja minna veidi erinevat vahekaugust. Kui kõigil elementidel on samad vahenõuded, kaaluge selle kasutamist scroll-paddingvanemal konteineril, scroll-marginsest see mõjutab konteineri kõigi elementide vahekaugust.

Lihtne näide, kus scroll-marginelemendi üla- ja vasakpoolse osa eraldamine 50 pikslisega näeb välja selline:

.scroll-element ( scroll-margin: 50px 0 0 50px; )
Roosa ala tähistab scroll-marginseda elementi.

Süntaks

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

Oluline märkus pikakäeliste kohta: Chrome (ja võib-olla ka muud brauserid) ei toeta praegu käevormingut scroll-paddingega scroll-marginatribuute. Kasutage brauseri maksimaalseks toeks lühikirjandit. Lisateavet ja praegust olekut leiate kroomiveajälgijast.

Väärtused

scroll-marginaktsepteerib järgmisi pikkus väärtus, mis on kirjutatud sarnane marginja muud omadused, kus raha saab määratleda üksuste ( px, em, vhjne). Lisateavet leiate W3C väärtuste ja ühikute moodulist. Protsente ei saa kasutada scroll-marginspetsifikatsiooni kohta.

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