Vieritysmarginaali - CSS-temppuja

Anonim

scroll-marginon 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-marginon valinnainen ominaisuus vierityksen napsauttavalle elementille vierityksen napsautussäiliössä. Lisätietoja vierityspainikkeista on scroll-snap-typealmanakka-merkinnässä.

Syötä vieritysmarginaali

scroll-marginkäytetään säätämään elementin napsautusaluetta (ruutu, joka määrittää, mihin elementti napsautetaan). Lisääminen scroll-marginon hyödyllistä, kun sinun on annettava elementille tilaa säiliön reunasta, kun se napsautetaan paikalleen, mutta sallii tilanteet, joissa kukin elementti saattaa tarvita hieman erilaista väliä. Jos kaikilla elementeillä on samat etäisyysvaatimukset, harkitse käyttöä scroll-paddingemosäiliössä sen sijaan, scroll-marginettä se vaikuttaa säiliön kaikkien elementtien väliin.

Yksinkertainen esimerkki, jossa 50 scroll-marginpikselin etäisyyden salliminen elementin ylä- ja vasemmanpuoleisella alueella näyttää tältä:

.scroll-element ( scroll-margin: 50px 0 0 50px; )
Vaaleanpunainen alue edustaa scroll-margintätä elementtiä.

Syntaksi

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

Tärkeä huomautus pitkäkäsi: Chrome (ja mahdollisesti muut selaimet) eivät tällä hetkellä tue pitkäkäden muotoa scroll-paddingja scroll-marginominaisuuksia. Käytä lyhennettä maksimaaliseen selaintukeen. Katso tämä numero kromivirheiden seurannasta saadaksesi lisätietoja ja tämänhetkisen tilan.

Arvot

scroll-marginhyväksyy seuraavat pituus arvo, joka on kirjoitettu samanlainen marginja muita ominaisuuksia, joiden arvo voidaan määrittää yksikköä ( px, em, vh, jne). Katso lisätietoja W3C-arvot ja yksiköt -moduulista. Prosentteja ei voida käyttää määrittelyn scroll-marginmukaan.

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