Vieritä-napsauta-kohdista - CSS-temppuja

Anonim

scroll-snap-alignon 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-snap-alignon vaadittu ominaisuus vierityksen napsauttavalle elementille vierityksen napsautussäiliössä. Lisätietoja vierityspainikkeista on scroll-snap-typealmanakka-merkinnässä. scroll-snap-alignkertoo selaimelle, mikä osa elementin olisi yhdenmukaistettava kun silmänräpäyksessä kohdataan: Jos elementti kohdistaa elementtejä start, centertai endvanhemman säiliö, joka sisältää scroll-snap-typeomaisuutta?

Jos haluat elementin napsahtavan paikalleen elementin alussa, anna sille tällainen scroll-snap-alignarvo:

/* Assuming this element is a child of a container with `scroll-snap-type` set */ .element ( scroll-snap-align: start; )

Syntaksi

scroll-snap-align: ( none | start | end | center )(1,2)

Voit määrittää tälle ominaisuudelle enintään 2 arvoa, jotka edustavat vastaavasti lohko- ja inline-akseleita. Jos annat vain yhden arvon, kyseistä arvoa käytetään molemmille akseleille.

Arvot

scroll-snap-align hyväksyy seuraavat arvot:

  • none poistaa elementin vierityksen napsautuksen käytöstä
  • start kohdistaa elementin aloituksen vierityssäiliön napsautusporttiin, kun se napsautetaan paikalleen
  • end kohdistaa elementin pään vierityssäiliön napsautusporttiin, kun se napsautetaan paikalleen
  • center kohdistaa elementin keskuksen vierityssäiliön napsautusporttiin, kun se napsautetaan paikalleen

Esimerkki

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-padding
  • scroll-snap-stop

Resurssit

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