scroll-marginär en del av CSS Scroll Snap Module. Scroll snapping hänvisar till att "låsa" positionen för visningsområdet för specifika element på sidan när fönstret (eller en rullbar behållare) rullas. Tänk på en rullningsfångande behållare som att sätta en magnet ovanpå ett element som håller sig till toppen av visningsområdet och tvingar sidan att sluta rulla där.
scroll-marginär en valfri egenskap för ett scroll-snapping-element i en scroll-snap-container. För mer information om rullningsfästande behållare se scroll-snap-typealmanackposten.
Ange rullningsmarginal
scroll-marginanvänds för att justera ett elements snäppområde (rutan som definierar var elementet ska knäppas till). Att lägga till scroll-marginär användbart när du behöver ge ett element utrymme från behållarens kant när det snäpps på plats, men möjliggör situationer där varje element kan behöva lite olika avstånd. Om alla element har samma avståndskrav, överväga att använda den scroll-paddingpå den överordnade behållaren istället för scroll-margineftersom det påverkar avståndet för alla element i behållaren.
Ett enkelt exempel där det scroll-marginmöjliggör avstånd på 50 pixlar längst upp och till vänster om ett element ser ut så här:
.scroll-element ( scroll-margin: 50px 0 0 50px; )
scroll-marginpå detta element.
Syntax
/* 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);Viktig anmärkning om longhands: Chrome (och eventuellt andra webbläsare) stöder för närvarande inte longhand-format scroll-paddingoch scroll-marginegenskaper. Använd stenografi för maximalt webbläsarsupport. Se det här problemet i kromfelspåraren för mer information och aktuell status.
Värden
scroll-margingodtar följande en längd -värde, som är skriven liknar marginoch andra egenskaper där kan definieras värdet med enheter ( px, em, vh, etc). Se W3C-värden och enheter-modulen för mer information. Procentandelar kan inte användas för scroll-marginspecifikationen.
Exempel
Se exemplet
med rullning av pennor från CSS-Tricks (@ css-tricks) på CodePen.
Webbläsarstöd
Denna webbläsares supportdata kommer från Caniuse, som har mer detaljer. Ett nummer indikerar att webbläsaren stöder funktionen i den versionen och uppåt.
Skrivbord
| Krom | Firefox | IE | Kant | Safari |
|---|---|---|---|---|
| 69 | 68 | 11 * | 79 | 11 |
Mobil / surfplatta
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 81 | 11.0-11.2 |
Relaterad
scroll-snap-typescroll-marginscroll-snap-alignscroll-snap-stop
Resurser
- CSS Scroll Snap W3C kandidatrekommendation
- Praktisk rullning av CSS
- Introduktion till CSS Scroll Snap Points