CSS scroll-margin-top eigenschap

Definitie en gebruik

scroll-margin-top De afstand tussen de positie van de aantrekking en het container wordt gespecificeerd door de

Eigenschap scroll-snap-align De positie van de aantrekking is de positie van het subelement in het container die wordt vastgelegd wanneer het scrolleffect stopt. De positie van de aantrekking wordt gespecificeerd door de De eigenschap voor de richting wordt ingesteld, maar kan ook beïnvloed worden door de CSS eigenschap en writing-mode Eigenschap

invloed.Let op:

Dit eigenschap is alleen effectief wanneer de positie van de aantrekking ingesteld is op de top van het subelement. scroll-margin-top De effecten van de eigenschappen moeten ingesteld worden op het subelement om te zien scroll-margin-top en scroll-snap-align De eigenschap, en stel op de ouderlijke element de scroll-snap-type Eigenschap.

Voorbeeld

Voorbeeld 1

Stel de top scroll margin tussen de positie van de aantrekking en het container in op 20px:

div {
  scroll-margin-top: 20px;
}

Probeer het zelf

Voorbeeld 2: Afbeeldingsbibliotheek

scroll-margin-top De eigenschap kan worden gebruikt in een galerij met een vastgelegde actie. Hier,scroll-margin-top Laat de gebruiker weten dat er nog een afbeelding bovenaan is. Scrol naar de eerste afbeelding om het effect te zien:

#container > img {
  scroll-margin-top: 30px;
}

Probeer het zelf

Voorbeeld 3: Vastgelegde positie

Om scroll-margin-top De eigenschap werkt, de positie van de vastzetting moet ingesteld worden op de top van het subelement. In dit voorbeeld,writing-mode De eigenschap verandert de vastgelegde positie van de subelementen van de top naar de rechterkant. Gebruik deze code omscroll-margin-top De eigenschap zal niet meer werken:

#container {
  writing-mode: vertical-rl;
}
#container > div {
  scroll-margin-top: 30px;
  scroll-snap-align: start none;
}

Probeer het zelf

CSS Syntax

scroll-margin-top: 0|value|initial|inherit;

Eigenschapswaarde

Waarde Beschrijving
0 De top scroll margin is 0. Dit is de standaardwaarde.
length

Geef de waarde van de top scroll margin in px, pt, cm en andere eenheden. Negatieve waarden zijn toegestaan.

Raadpleeg:CSS Units.
initial Stel deze eigenschap in op de standaardwaarde. Raadpleeg initial.
inherit Deze eigenschap erfde van de ouderlijke element. Raadpleeg inherit.

Technische details

Standaardwaarde: 0
Inheritantie: Nee
Animatieproductie: Niet ondersteund. Raadpleeg:Animatiegerelateerde eigenschappen.
Versie: CSS3
JavaScript Syntax: object.style.scrollMarginTop="20px"

Browserondersteuning

De tabelnummers geven de versie van de browser weer die de eigenschap volledig ondersteunt.

Chrome Edge Firefox Safari Opera
69.0 79.0 68.0 14.1 56.0

Gerelateerde pagina's

Referentie:CSS richting eigenschap

Referentie:CSS scroll-snap-align eigenschap

Referentie:CSS scroll-snap-type eigenschap

Referentie:CSS writing-mode eigenschap