CSS scroll-margin-inline-start egenskap

Definition och användning

scroll-margin-inline-start Egenskapen specificerar avståndet mellan den fastsatta positionen och behållaren i inre riktning.

Detta innebär att när du slutar rulla, justeras rullen snabbt och stoppar i den angivna avståndet från den fastsatta positionen vid början av underlementet och behållaren i inre riktning.

Inre riktning är den position där nästa tecken placeras relativt till det nuvarande tecknet i raden, detta är också layoutstilen 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 riktning är från höger till vänster, medan inre riktning på engelska sidor är från vänster till höger. Inre riktning kan justeras genom CSS-attribut direction och writing-mode Definition.

Fästplatsen är den plats där underelementen i behållaren fastnar när du stoppar med att skrolla.

Observera:Denna egenskap fungerar endast scroll-snap-align egenskapen är satt till 'start' för inre riktning, börjar den fungera.

CSS scroll-margin-inline och scroll-margin-block egenskaper är lika med CSS-egenskapen CSS scroll-margin-top egenskap,scroll-margin-bottom,scroll-margin-left och scroll-margin-right är mycket lika, men scroll-margin-block och scroll-margin-inline Egenskapen är beroende av blockriktning och inre riktning.

Exempel

Exempel 1

Ange avstånd från fästplatsen till skrollbar behållare i inre riktningen:

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

Prova själv

Exempel 2

När <div>-elementets writing-mode När egenskapsvärdet är satt till vertical-rl, är inre riktningen neråt. Resultatet är att elementets startposition flyttas från vänster till toppen:

div {
  scroll-margin-inline-start: 20px;
  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 justeras från vänster (relativt ursprunglig riktning, vilket faktiskt fortfarande börjar på höger sida, men här avses "vänster" som ursprunglig standardriktning (ltr) vänster)

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

Prova själv

CSS-syntax

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

Egenskapsvärde

Värde Beskrivning
0 Standard. Elementets standard inre avstånd.
length

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

Se vidare:CSS units.
initial Använd detta egenskaps standardvärde. Se vidare initial.
inherit Följer detta egenskaps värde från föräldrelementet. Se vidare inherit.

Tekniska detaljer

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

Webbläsarstöd

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

Chrome Edge Firefox Safari Opera
69.0 79.0 68.0 14.1 56.0

Relaterade sidor

Referens:CSS direction egenskap

Referens:CSS scroll-snap-align egenskap

Referens:CSS scroll-snap-type egenskap

Referens:CSS writing-mode egenskap