CSS scroll-margin-inline egenskap

Definition och användning

scroll-margin-inline Egenskapen specificerar avståndet mellan fästplatsen och behållaren i inre riktningen.

Detta innebär att när du stoppar rullningen, justeras rullningen snabbt och stoppar i den specificerade avståndet i inre riktningen, vilket ligger mellan fästplatsen och behållaren.

Inre riktningen är riktningen för placeringen av nästa tecken i raden jämfört med det befintliga tecknet, vilket också är layouten för etiketter med CSS display: inline; (t.ex. <a>- och <strong>-etiketter) i texten. Inre riktning beror på skrivspråk, till exempel är nya tecken i arabiska ordnade från höger till vänster, så inre riktningen är från höger till vänster, medan inre riktningen på engelska sidor är från vänster till höger. Inre riktning kan sättas med CSS-attribut direction och writing-mode Definition.

Fästplatsen är den plats där underelementet fäster sig i behållaren när rullningen stoppas.

scroll-margin-inline Egenskapen är en förkortning av följande egenskaper:

scroll-margin-inline Egenskapens värde kan sättas på olika sätt:

Om scroll-margin-inline-egenskapen har två värden:

scroll-margin-inline: 20px 70px;
  • Avståndet från början är 20px
  • Avståndet från slutet är 70px

Om scroll-margin-inline-egenskapen har ett värde:

scroll-margin-inline: 20px;
  • Avståndet från början och slutet är 20px

För att se scroll-margin-inline Effekten av egenskapen måste sättas på underelementen scroll-margin-inline och scroll-snap-align egenskapen, och sätt in den på föräldrelementet scroll-snap-type .

CSS-egenskapen scroll-margin-inline och scroll-margin-block egenskapen är lik den CSS-egenskapen CSS scroll-margin-top egenskap,scroll-margin-bottom,scroll-margin-left och scroll-margin-right är mycket lik, men scroll-margin-block och scroll-margin-inline Egenskapen är beroende av blockriktningen och inre riktningen.

Exempel

Exempel 1

Ange avståndet från fästningspositionen till rullbar behållare i inre riktningen:

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

Prova själv

Exempel 2

När <div>-elementets writing-mode När egenskapsvärdet är satt till vertical-rl är inre riktningen nedåt. Resultatet är att elementets startposition flyttas från vänster till toppen och elementets slutposition från höger till botten. Det påverkar också scroll-margin-inline Egenskap:

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

Prova själv

Exempel 3

När <div>-elementets direction När egenskapsvärdet är satt till rtl är inre riktningen från höger till vänster. Resultatet är att elementets startposition flyttas från vänster till höger och elementets slutposition från höger till vänster. Det påverkar också scroll-margin-inline Egenskap:

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

Prova själv

CSS-syntax

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

Egenskapsvärde

Värde Beskrivning
0 Standard. Elementets standard scroll-margin-inline-avstånd.
length

Specificera avstånd med enheter som px, pt, cm osv. Negativa värden är tillåtna.

Se till:CSS enheter.
initial Sätt denna egenskap till dess standardvärde. Se till: initial.
inherit Inheritera denna egenskap från föräldrelementet. Se till: inherit.

Tekniska detaljer

Standardvärde: 0
Arvande: Nej
Animation tillverkning: Stöds inte. Se till:Animation relaterade egenskaper.
Version: CSS3
JavaScript-syntax: object.style.scrollMarginInline="20px"

Webbläsarstöd

Tabellens siffror representerar den första webbläsarens version som helt stöder egenskapen.

Chrome Edge Firefox Safari Opera
69.0 79.0 68.0 14.1 56.0

Relaterade sidor

Referens:CSS direction egenskap

Referens:CSS scroll-margin-inline-end egenskap

Referens:CSS scroll-margin-inline-start egenskap

Referens:CSS scroll-snap-align egenskap

Referens:CSS scroll-snap-type egenskap

Referens:CSS writing-mode egenskap