Ritināšanas mala - CSS-triki

Anonim

scroll-marginir 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-marginir 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ā.

Ievadiet ritināšanas malu

scroll-margintiek izmantots, lai pielāgotu elementa fiksācijas laukumu (rūtiņa, kas nosaka vietu, kur elements tiks fiksēts). Pievienošana scroll-marginir noderīga, ja elementam no konteinera malas jāatstāj vieta, kad tas ir nofiksēts, taču pieļauj situācijas, kad katram elementam var būt nepieciešams nedaudz atšķirīgs atstarpes. Ja visiem elementiem ir vienādas atstarpes prasības, apsveriet iespēju izmantot scroll-paddingvecāku konteinerā, scroll-marginjo tas ietekmē atstarpes visiem konteinera elementiem.

Vienkāršs piemērs, kur scroll-marginpieļauta 50 pikseļu atstarpe ap elementa augšdaļu un kreiso pusi izskatās šādi:

.scroll-element ( scroll-margin: 50px 0 0 50px; )
Rozā krāsa apzīmē scroll-marginšo elementu.

Sintakse

/* Shorthand */ scroll-margin: (1,4); /* Longhands */ scroll-margin-top: ; scroll-margin-right: ; scroll-margin-bottom: ; scroll-margin-left: ; /* inline-specific and block-specific properties as well */ scroll-margin-block: (1,2); scroll-margin-inline: (1,2);

Svarīga piezīme par garām rokām: Chrome (un, iespējams, arī citas pārlūkprogrammas) pašlaik neatbalsta formātu scroll-paddingun scroll-marginrekvizītus ar garām rokām . Lai maksimāli atbalstītu pārlūku, izmantojiet stenogrammu. Skatiet šo problēmu hroma kļūdu izsekotājā, lai iegūtu sīkāku informāciju un pašreizējo statusu.

Vērtības

scroll-marginakceptē šādu garumu vērtība, kas ir rakstīts līdzīgi marginun citus rekvizītus, kur vērtību var definēt ar vienībām ( px, em, vh, uc). Plašāku informāciju skatiet W3C vērtību un mērvienību modulī. Procentus nevar izmantot scroll-marginatbilstoši specifikācijai.

Piemērs

Skatiet
CSS-Tricks (@ css-tricks) pildspalvas ritināšanas un pildīšanas 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-snap-type
  • 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