CSS scroll-margin-inline-start eigenschap

Definitie en gebruik

scroll-margin-inline-start De eigenschap specificeert de afstand tussen de aanhechtingspositie en de container in de richting van de lijn binnen.

Dit betekent dat, wanneer je het scrollen stopt, het scrollen snel wordt aangepast en stopt op de aangegeven afstand tussen de aanhechtingspositie van het subelement en het container in de richting van de lijn binnen.

De richting van de lijn binnen betekent de richting waarin de volgende character ten opzichte van het huidige character in de lijn wordt geplaatst. Dit is ook de weergave van tags met CSS display: inline; (zoals <a> en <strong> tags) in de tekst. De richting van de lijn binnen hangt af van de schrijftaal, bijvoorbeeld Arabisch wordt van rechts naar links geschreven, dus de richting van de lijn binnen is van rechts naar links, terwijl de richting van de lijn binnen op een Engelse pagina van links naar rechts is. De richting van de lijn binnen kan worden aangepast via de CSS-eigenschap direction scroll-margin-block Voorbeeld 2 定义。

Definitie.

Aangehechte positie verwijst naar de positie waarin de subelementen in de container worden geadheerd wanneer je het scrollen stopt.Opmerking: Deze eigenschap is alleen van toepassing op scroll-snap-align

Eigenschappen de inline-richting op 'start' instellen. en scroll-margin-block Zeer vergelijkbaar, maar CSS CSS scroll-margin-top eigenschapscroll-margin-bottomEigenschappen zijn alleen van kracht wanneer de eigenschap van CSSscroll-margin-bottomscroll-margin-left scroll-margin-block , scroll-margin-right Zeer vergelijkbaar, maar scroll-margin-block en scroll-margin-inline

Eigenschappen zijn afhankelijk van de blokkenrichting en de inline-richting.

Voorbeeld

Voorbeeld 1

div {
  scroll-margin-inline-start: 20px;
}

Probeer het zelf uit

Stel de inline-richting in, van de aangehechte positie tot de afrolbare container:

Wanneer de waarde van de eigenschap van het <div>-element Voorbeeld 2 writing-mode

div {
  scroll-margin-inline-start: 20px;
  Wanneer de waarde van de eigenschap op vertical-rl is ingesteld, is de inline-richting naar beneden. Het resultaat is dat de startpositie van het element van links naar boven verplaatst wordt:
}

Probeer het zelf uit

Voorbeeld 3

Wanneer de waarde van de eigenschap van het <div>-element direction Wanneer de waarde van de eigenschap op rtl is ingesteld, is de inline-richting van rechts naar links. Het resultaat is dat de startpositie van het element van links (ten opzichte van de standaardrichting, wat in feite nog steeds van rechts begint, maar hier wordt 'links' beschouwd als de linkerkant van de standaardrichting ltr) aangepast wordt:

div {
  scroll-margin-inline-start: 20px;
  direction: rtl;
}

Probeer het zelf uit

CSS syntax

inset-inline-start: 0|value|initial|inherit;

Eigenschapswaarde

Technische details

Browserondersteuning

Tafels met cijfers geven de browserversie aan die het eerste volledig ondersteunde.

Gerelateerde pagina's

Referentie:CSS richting eigenschap

Referentie:CSS scroll-snap-align eigenschap

Referentie:CSS scroll-snap-type eigenschap

Referentie:CSS writing-mode eigenschap