CSS scroll-margin eigenschap
- vorige pagina scroll-behavior
- volgende pagina scroll-margin-block
Definitie en gebruik
scroll-margin De eigenschap specificeert de afstand tussen de aantrekkingpositie en het container.
Dit betekent dat wanneer je het scrollen stopt, het scrollen snel wordt aangepast en stopt op de aantrekkingpositie (snap position) op de afstand die is gespecificeerd tussen de aantrekkingpositie en het container.
De positionering van de aantrekking is de positie waarin het subelement in het container stopzet, na het stopzetten van het scrollen.
scroll-margin De eigenschap is een verkorte vorm van de volgende eigenschappen:
scroll-margin De waarden van de eigenschap kunnen op verschillende manieren worden ingesteld:
Als de scroll-margin-eigenschap vier waarden heeft:
scroll-margin: 15px 30px 60px 90px;
- Bovenste afstand is 15px
- Rechter afstand is 30px
- Ondersteuningsafstand is 60px
- Linkse afstand is 90px
Als de scroll-margin-eigenschap drie waarden heeft:
scroll-margin: 15px 30px 60px;
- Bovenste afstand is 15px
- de afstanden aan de linkerkant en de rechterkant zijn 30px
- Ondersteuningsafstand is 60px
Als de scroll-margin-eigenschap twee waarden heeft:
scroll-margin: 15px 30px;
- de afstanden aan de bovenkant en de onderkant zijn 15px
- de afstanden aan de linkerkant en de rechterkant zijn 30px
Als de scroll-margin-eigenschap een waarde heeft:
scroll-margin: 10px;
- de afstanden in alle vier richtingen zijn 10px
om te zien scroll-margin eigenschapseffecten, moeten op de zoon element worden ingesteld scroll-margin en scroll-snap-align eigenschap, en stel op de ouder element in scroll-snap-type eigenschap.
opmerking:In het volgende voorbeeld zijn alle kanten van de scroll-uitmarge ingesteld, maar vanwege scroll-snap-align de eigenschap is ingesteld op "start", dus alleen de bovenste scroll-uitmarge verandert het scrollgedrag.
voorbeeld
voorbeeld 1
stel de scroll-uitmarge tussen de aantrekkingspositie en het container in op 20px:
div {
scroll-margin: 20px;
}
voorbeeld 2: afbeeldingscollectie
scroll-margin de eigenschap kan worden gebruikt in een afbeeldingscollectie met aantrekkingskracht. Hier:scroll-margin laat de gebruiker zien dat er nog een afbeelding aan de linkerkant is. Scroll over de eerste afbeelding om het effect te zien:
#container > img {
scroll-margin: 0 0 0 30px;
}
voorbeeld 3: instellen van de scroll-uitmarge aan de onderkant en de rechterkant
kan worden ingesteld aan de onderkant en de rechterkant van het element scroll-margin eigenschap. Horizontaal en verticaal scrollen naar het volgende element om het effect te zien:
#container > div {
scroll-margin: 0 10px 30px 0;
}
CSS syntaxis
scroll-margin: 0|value|initial|inherit;
eigenschapswaarde
| waarde | beschrijving |
|---|---|
| 0 | De scroll-uitmarge is nul. Standaardwaarde. |
| length |
Specificeer de scroll-uitmarge in px, pt, cm of andere eenheden. Negatieve waarden zijn toegestaan. Raadpleeg:CSS Units. |
| initial | Stel deze eigenschap in op de standaardwaarde. Raadpleeg initial. |
| inherit | Deze eigenschap erft van de ouder element. Raadpleeg inherit. |
technische details
| standaardwaarde: | 0 |
|---|---|
| inherenticiteit: | nee |
| animatie maken: | niet ondersteund. Raadpleeg:animatiegerelateerde eigenschappen. |
| versie: | CSS3 |
| JavaScript syntaxis: | object.style.scrollMargin="20px" |
browserondersteuning
De cijfers in de tabel geven de browserversie aan die de eigenschap volledig ondersteunt.
| Chrome | Edge | Firefox | Safari | Opera |
|---|---|---|---|---|
| 69.0 | 79.0 | 90.0 | 14.1 | 56.0 |
gerelateerde pagina's
bron:CSS scroll-margin-bottom eigenschap
bron:CSS scroll-margin-left eigenschap
bron:CSS scroll-margin-right eigenschap
bron:CSS scroll-margin-top eigenschap
- vorige pagina scroll-behavior
- volgende pagina scroll-margin-block
