Ritināt-snap-stop - CSS-triki

Satura rādītājs

scroll-snap-stopir 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-stopir izvēles rekvizīts ritināšanas snapping elementam ritināšanas snapping konteinerā. Plašāku informāciju par konteineriem, kas atrodas ritināšanas laikā, skatiet scroll-snap-typealmanaha ierakstā.

scroll-snap-stopļauj piespiest ritināšanas satveršanas konteineru pieskarties noteiktam elementam. Pieņemsim, ka jūs ritinājāt tvertnē, kurā atrodams ritināšanas process, un jūs tam devāt milzīgu peles rata vērpšanu. Parasti pārlūkprogramma ļaus jūsu ritināšanas ātrumam lidot gar fiksācijas punktiem, līdz tas apstājas uz fiksācijas punktu tuvu vietai, kur ritināšana parasti beigsies. Iestatot, scroll-snap-stopjūs varat pateikt pārlūkprogrammai, ka tam jāapstājas pie kāda konkrēta elementa, pirms ļauj lietotājam to aiziet garām.

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

Sintakse

scroll-snap-stop: normal | always;

Vērtības

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

  • normal ir noklusējuma vērtība un ļauj elementu ritināt garām, nenoklikšķinot
  • always piespiedīs pārlūku pieķerties šim elementam, pat ja ritināšana parasti ietu garām šim elementam

Piemērs

Skatiet
CSS-Tricks (@ css-tricks) pildspalvas ritināšanas-snap-stop 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

Ņemiet vērā, ka pārlūks Chrome scroll-snap-stop: always;pašlaik var neatbalstīt .

Saistīts

  • scroll-snap-type
  • scroll-margin
  • scroll-padding
  • scroll-snap-align

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...