Vieritä-napsauta-tyyppi - CSS-temppuja

Anonim

scroll-snap-typeOminaisuus on osa CSS Scroll Snap moduuli. Vierityksen napsautus tarkoittaa näkymän sijainnin "lukitsemista" sivun tiettyihin elementteihin, kun ikkunaa (tai vieritettävää säilöä) vieritetään. Ajattele sitä kuin laittaa magneetti elementin päälle, joka tarttuu näkymän yläosaan ja pakottaa sivun lopettamaan vierityksen siellä.

Tästä on hyötyä, jos haluat pysäyttää selaimen tietyissä kohdissa sivulla. Esimerkiksi: Valokuvagalleriaa selaava käyttäjä ei todennäköisesti halua vierittää kuvan puolivälissä - todennäköisesti haluaisi, että kuva napsautettaisiin oikeaan asentoon vierittäessään. Vierityksen napsautus antaa kehittäjille puhtaan CSS-tavan käsitellä tätä käyttäytymistä.

scroll-snap-typeon pakollinen ominaisuus kaikessa vieritettävässä säilössä, johon haluat lisätä vierityksen napsautuksen. Se vastaa kolmeen selaussäiliön kysymykseen:

  1. Käyttääkö säiliö vierityksen napsautusta?
  2. Millä akselilla - x (vaaka), y (pystysuora), lohko tai linjassa - vierityksen napsautusta tulisi käyttää?
  3. Kuinka vierityksen napsauttamisen pitäisi toimia? Pakotetaanko se 100% ajasta vai tuleeko se voimaan vasta, kun käyttäjä pääsee "tarpeeksi lähelle" napsautusasentoa? Lisää tästä myöhemmin.
.scroll-container ( /* Always force (mandatory) scrolling to a snap point on the y-axis */ scroll-snap-type: y mandatory; )

Syntaksi

scroll-snap-type: none | ( x | y | block | inline | both ) ( mandatory | proximity )

Arvot

scroll-snap-type hyväksyy seuraavat arvot:

  • none poistaa vierityksen napsautuksen käytöstä.
  • x sallii vierityksen napsautuksen vain x-akselia pitkin.
  • y sallii vierityksen napsautuksen vain y-akselia pitkin.
  • block sallii vierityksen napsautuksen vain lohkoakselia pitkin.
  • inline sallii vierityksen napsautuksen vain linja-akselia pitkin.
  • bothmahdollistaa vierityksen napsauttamisen molempia akseleita pitkin (joita voit ajatella nimellä xja y, tai inlineja block.
  • mandatory on tiukkuusarvo, joka kertoo selaimen siirtymään aina napsautusasentoon, kun vieritystä ei tapahdu.
  • proximityon tiukkuusarvo, joka käskee selainta siirtymään napsautusasentoon, jos vieritystoiminto tulee melko lähelle napsautusasentoa. Jos se ei ole melko lähellä, selaimen ei pitäisi napsahtaa ja vieritys toimii normaalisti.

Esimerkki

Katso
CSS-Tricksin (@ css-tricks) kynän vieritys-napsautustyyppinen esimerkki 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-padding
  • 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