Ritināt-snap-līdzināt - CSS-triki

Satura rādītājs

scroll-snap-alignir daļa no CSS Scroll Snap moduļa. Ritināšanas nospiešana attiecas uz skata vietas pozīcijas “bloķēšanu” konkrētiem lapas elementiem, ritinot logu (vai ritināmo konteineru). Padomājiet par ritināšanas un uzspiešanas konteineru, piemēram, magnēta uzlikšanu virs elementa, kas pielīp skata punkta augšpusē un liek lapai pārtraukt ritināšanu turpat.

scroll-snap-alignir obligāts rekvizīta elementa rekvizīts ritināšanas aktivizēšanas konteinerā. Plašāku informāciju par konteineriem, kas atrodas ritināšanas laikā, skatiet scroll-snap-typealmanaha ierakstā. scroll-snap-alignstāsta pārlūku, kas ir daļa no elementa, būtu jāsaskaņo, ja snap punktu radušās: ja elements snap uz start, centervai endno mātes konteinera, kas satur scroll-snap-typeīpašumu?

Ja vēlaties, lai elements šī elementa sākumā nofiksētos, piešķiriet tam šādu scroll-snap-alignvērtību:

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

Sintakse

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

Šim rekvizītam varat norādīt līdz 2 vērtībām, kas attiecīgi norāda bloku un inline asis. Ja norādāt tikai 1 vērtību, šī vērtība tiks izmantota abām asīm.

Vērtības

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

  • none atspējo elementa ritināšanu
  • start elementa sākums tiek saskaņots ar ritināšanas konteinera snapport, kad tas tiek fiksēts vietā
  • end kad elements ir nofiksēts, elementa gals tiek saskaņots ar ritināšanas konteinera snapport
  • center kad tas ir nofiksēts, izlīdzina elementa centru ar ritināšanas konteinera snapport

Piemērs

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

Interesanti raksti...