Scroll-snap-type - CSS-triki

Anonim

scroll-snap-typeĪpašums ir daļa no CSS Ritiniet Snap modulī. Ritināšanas atkārtošana attiecas uz skata vietas pozīcijas "bloķēšanu" konkrētiem lapas elementiem, ritinot logu (vai ritināmo konteineru). Padomājiet par to, piemēram, uzliekot magnētu virs elementa, kas pielīp skata punkta augšpusē un liek lapai pārtraukt ritināšanu turpat.

Tas ir noderīgi, ja vēlaties pārtraukt pārlūkprogrammu noteiktos lapas punktos. Piemēram: Lietotājs, kurš pārlūko fotogaleriju, visticamāk, nevēlas ritināt pusi attēla - viņš, visticamāk, vēlētos, lai ritinot attēls tiktu “nofiksēts” pareizajā pozīcijā. Ritināšanas atdalīšana dod izstrādātājiem tīru CSS veidu, kā rīkoties šādi.

scroll-snap-typeir obligāts rekvizīts jebkuram ritināmam konteineram, kuram vēlaties pievienot ritināšanas nospiešanu. Tas atbild uz trim jautājumiem par ritināšanas konteineru:

  1. Vai konteinerā tiek izmantots ritināšanas uzspiešana?
  2. Uz kuras ass - x (horizontāli), y (vertikāli), bloku vai inline - jāpiemēro ritināšanas uzspiešana?
  3. Kā būtu jārīkojas ritināšanas uzlaušanai? Vai tas ir piespiedu kārtā 100% gadījumu, vai arī tas stājas spēkā tikai tad, kad lietotājs nonāk “pietiekami tuvu” snap pozīcijai? Vairāk par to vēlāk.
.scroll-container ( /* Always force (mandatory) scrolling to a snap point on the y-axis */ scroll-snap-type: y mandatory; )

Sintakse

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

Vērtības

scroll-snap-type pieņem šādas vērtības:

  • none atspējo ritināšanu.
  • x iespējo ritināšanu tikai pa x asi.
  • y iespējo ritināšanu, pārvelkot tikai pa Y asi.
  • block iespējo ritināšanu tikai pa bloka asi.
  • inline iespējo ritināšanu, kas notiek tikai pa ass asi.
  • bothļauj ritināšanas snapping gar abām asīm (ko jūs varat iedomāties, kā xun yvai inlineun block.
  • mandatory ir stingrības vērtība, kas liek pārlūkprogrammai vienmēr pāriet uz fiksēto pozīciju, kad ritināšana nenotiek.
  • proximityir stingrības vērtība, kas liek pārlūkprogrammai pāriet snap pozīcijā, ja ritināšanas darbība nonāk diezgan tuvu snap pozīcijai. Ja tas nav diezgan tuvu, pārlūkprogrammai nevajadzētu snap un ritināšana darbosies normāli.

Piemērs

Skatiet
CSS-Tricks (@ css-tricks) pildspalvas scroll-snap tipa piemēru vietnē CodePen.

Pārlūka atbalsts

Šie pārlūka atbalsta dati ir no Caniuse, kurai ir sīkāka informācija. Cipars norāda, ka pārlūks atbalsta šo un jaunākās versijas funkciju.

Darbvirsma

Chrome Firefox IE Mala Safari
69 68 11 * 79 11

Mobilais / planšetdators

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

Saistīts

  • scroll-padding
  • scroll-margin
  • scroll-snap-align
  • scroll-snap-stop

Resursi

  • CSS Scroll Snap W3C kandidātu ieteikums
  • Praktiska CSS ritināšanas sagrābšana
  • Iepazīstinām ar CSS Scroll Snap Points