Vierityspehmuste - CSS-temppuja

Anonim

scroll-paddingon osa CSS Scroll Snap -moduulia. Vierityksen napsautus tarkoittaa näkymän sijainnin lukitsemista sivun tiettyihin elementteihin, kun ikkunaa (tai vieritettävää säilöä) vieritetään. Ajattele vierityspainiketta, kuten magneetin asettaminen elementin päälle, joka tarttuu näkymän yläosaan ja pakottaa sivun lopettamaan vierityksen siellä.

scroll-paddingon valinnainen ominaisuus kaikille vierityspainikkeille. Vieritys napsahtavat säilöt määritetään aina, kun scroll-snap-typeominaisuudelle asetetaan jokin muu arvo none. Lisätietoja vierityspainikkeista on scroll-snap-typealmanakka-merkinnässä.

OK, joten siirry vierityspehmusteeseen

scroll-paddingkäytetään säätämään napsautettavan säiliön optimaalista katselualuetta. Tämä on hyödyllistä, jos säiliössä on elementtejä, kuten kiinteä otsikko, joka peittää elementit sisällä, tai jos vieritettävä säiliö tarvitsee tilaa antaa sisäelementeille tilaa hengittää, kun ne on "napsautettu" paikalleen.

Yksinkertainen esimerkki on käyttää scroll-paddingluomaan kiinteä väli 50pxsäiliön ylä- ja vasemmalle puolelle:

.scroll-container ( scroll-padding: 50px 0 0 50px; )
Vaaleanpunaiset alueet osoittavat vierityspainikkeen vierityksen.

Syntaksi

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

Tärkeä huomautus pitkäikäisistä: Chrome ei tällä hetkellä tue pitkämuotoisia tiedostoja scroll-paddingja scroll-marginominaisuuksia. Käytä lyhennettä maksimaaliseen selaintukeen. Katso tästä numerosta kromivirheseuraajasta saadaksesi lisätietoja ja tämänhetkisen tilan.

Arvot

scroll-padding hyväksyy seuraavat arvot:

  • autojättää pehmusteen selaimen / käyttäjäagentin määrittämään. Yleensä tämä tarkoittaa arvoa 0px, mutta voi olla nollasta poikkeava, jos käyttäjäagentti päättää, että toinen arvo on sopivampi.
  • kirjoitetaan samanlainen paddingja muita ominaisuuksia, joiden arvo voidaan määrittää yksikköä ( px, em, vh, jne.) tai prosenttiosuutena itse säiliön.

Esimerkki

Katso
CSS-Tricksin (@ css-tricks) kynän vierityspehmuste CodePenistä.

Selaimen tuki

Nämä selaintukitiedot ovat Caniuselta, jolla on tarkempia tietoja. Numero osoittaa, että selain tukee ominaisuutta kyseisessä versiossa tai uudemmassa.

Työpöytä

Kromi Firefox IE Reuna Safari
69 68 11 * 79 11

Matkapuhelin / tabletti

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

Liittyvät

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

Resurssit

  • CSS Scroll Snap W3C -ehdokkaiden suositus
  • Käytännöllinen CSS-vierityksen napsautus
  • Esittelyssä CSS Scroll Snap Points -pisteet