CSS scroll-margin-right eigenschap

Definitie en gebruik

scroll-margin-right Eigenschap specificeert de afstand tussen de aangehechte positie en het container.

De aangehechte positie is de positie waarin het subelement in het container wordt vastgezet wanneer het scrollen stopt. De aangehechte positie wordt gespecificeerd door scroll-snap-align Eigenschap instellen, maar kan ook worden beïnvloed door CSS-eigenschappen direction en writing-mode invloed.

Opmerking:Deze eigenschap is alleen effectief wanneer de aangehechte positie op de rechterkant van het subelement is ingesteld.

Om scroll-margin-right Eigenschapseffecten moeten worden ingesteld op het subelement om te zien: scroll-margin-right en scroll-snap-align Eigenschap, en stel op de ouderweergave in scroll-snap-type Eigenschap.

Voorbeeld

Voorbeeld 1

Stel de scrollmarge tussen de aangehechte positie en het container in op 20px:

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

Probeer het zelf uit

Voorbeeld 2: Afbeeldingsbibliotheek

scroll-margin-right De eigenschap kan worden gebruikt in een galerij met aangehechte gedragingen. Hier,scroll-margin-right Laat de gebruiker weten dat er nog een afbeelding aan de rechterkant is. Scroll over de eerste afbeelding om het effect te zien:

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

Probeer het zelf uit

Voorbeeld 3: Aangehechte positie

Om scroll-margin-right De eigenschap werkt, de aangehechte positie moet worden ingesteld op de rechterkant van het subelement. In dit voorbeeld,direction De eigenschap verandert de aangehechte positie van de rechterkant van de subelementen naar de linkerkant. Gebruik deze code omscroll-margin-right Deze eigenschap zal niet meer werken:

#container {
  direction: rtl;
}
#container > div {
  scroll-margin-right: 30px;
  scroll-snap-align: none end;
}

Probeer het zelf uit

CSS syntaxis

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

Eigenschapswaarde

Waarde Beschrijving
0 De rechter scrollmarge is 0. Standaardwaarde.
length

Specificeer de waarde van de rechter scrollmarge in px, pt, cm of andere eenheden. Negatieve waarden zijn toegestaan.

Raadpleeg:CSS Eenheid.
initial Stel deze eigenschap in op de standaardwaarde. Raadpleeg: initial.
inherit Deze eigenschap overneemt de waarde van de ouderweergave. Raadpleeg: inherit.

Technische details

Standaardwaarde: 0
Inheritantie: Nee
Animatie maken: Niet ondersteund. Raadpleeg:Animatiegerelateerde eigenschappen.
Versie: CSS3
JavaScript syntaxis: object.style.scrollMarginRight="20px"

Browserondersteuning

Tafelnummers geven de browserversie aan 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