CSS scroll-margin-inline eigenschap

Definitie en gebruik

scroll-margin-inline De eigenschap specificeert de afstand tussen de aantrekkingskrachtige positie en de container in de richting van de inline-richting.

Dit betekent dat, wanneer je het scrolleffect stopt, het scrollen snel wordt aangepast en stopt op de gespecificeerde afstand in de richting van de inline-richting, die zich tussen de aantrekkingskrachtige positie en de container bevindt.

De inline-richting is de richting waarin de volgende character ten opzichte van het huidige character in de regel wordt geplaatst, wat ook de lay-outmethode is van tags met CSS display: inline; (zoals <a> en <strong> tags) in de tekst. De inline-richting hangt af van de schrijflangte, bijvoorbeeld worden nieuwe tekens in het Arabische taalgebied van rechts naar links gerangschikt, dus de inline-richting is van rechts naar links, terwijl de inline-richting op een Engelse pagina van links naar rechts is. De inline-richting kan worden ingesteld via de CSS-eigenschap direction and writing-mode Definitie.

De aantrekkingskrachtige positie is de positie waarop het subelement zich vasthecht aan de container wanneer het scrolleffect stopt.

scroll-margin-inline De eigenschap is een verkorte vorm van de volgende eigenschappen:

• scroll-margin-inline-start
• scroll-margin-inline-end

Als de eigenschap scroll-margin-inline twee waarden heeft:

scroll-margin-inline: 20px 70px;

• De afstand aan het begin is 20px
• De afstand aan het einde is 70px

Als de waarde van de eigenschap scroll-margin-inline is:

scroll-margin-inline: 20px;

• De afstand aan het begin en einde is 20px

Moet worden gezien scroll-margin-inline Het effect van de eigenschap moet worden ingesteld op de subelementen scroll-margin-inline and scroll-snap-align properties, and set them on the parent element scroll-snap-type properties.

CSS scroll-margin-inline and scroll-margin-block properties are similar to the CSS properties CSS scroll-margin-top eigenschap,scroll-margin-bottum,scroll-margin-left and scroll-margin-right are very similar, but scroll-margin-block and scroll-margin-inline The attribute depends on the block direction and the inline direction.

Instance

Example 1

Sets the distance from the adhesion position to the scrollable container in the inline direction:

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

Try it yourself

Example 2

When the <div> element's writing-mode When the scroll-margin-inline property is set to vertical-rl, the inline direction is downward. The result is that the starting position of the element moves from the left to the top, and the ending position of the element moves from the right to the bottom. This also affects scroll-margin-inline Property:

div {
  scroll-margin-inline: 20px 0;
  writing-mode: vertical-rl;
}

Try it yourself

Example 3

When the <div> element's direction When the scroll-margin-inline property is set to rtl, the inline direction is from right to left. The result is that the starting position of the element moves from the left to the right, and the ending position of the element moves from the right to the left. This also affects scroll-margin-inline Property:

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

Try it yourself

CSS Syntax

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

Attribute value

Technical details

Browser Support

The numbers in the table represent the browser version that first fully supports this property.

Gerelateerde pagina's

Referentie:CSS richting eigenschap

Referentie:CSS scroll-margin-inline-end eigenschap

Referentie:CSS scroll-margin-inline-start eigenschap

Referentie:CSS scroll-snap-align eigenschap

Referentie:CSS scroll-snap-type eigenschap

Referentie:CSS writing-mode eigenschap