CSS scroll-padding-inline-end egenskap

Definition och användning

scroll-padding-inline-end Egenskapen specificerar avståndet i inline-riktningen mellan behållarens ände och justeringspositionen för underelementet.

Det innebär att när rullningen stoppas, justeras rullningen snabbt och stoppas på ett avstånd mellan justeringspositionen och behållaren som specificerats.

Riktningen för inline innebär riktningen för placeringen av nästa tecken relativt det nuvarande tecknet i raden, vilket också är layouten för etiketter med CSS display: inline; (t.ex. <a>- och <strong>-etiketter) i texten. Inline-riktningen beror på skrivspråket, till exempel är nya tecken i arabiska ordnade från höger till vänster, så inline-riktningen är från höger till vänster, medan inline-riktningen på engelska sidor är från vänster till höger. Inline-riktningen kan justeras genom CSS-attribut direction och writing-mode Definition.

Justeringspositionen innebär den plats där underelementen ställs in i behållaren när rullningen stoppas.

Observera:Denna egenskap är endast tillämplig på scroll-snap-align Egenskapen fungerar endast när riktningen är satt till 'end'.

För att se scroll-padding-inline-end egenskapen på föräldrelementet, och sätt scroll-snap-align egenskapen, och sätt scroll-padding-inline-end och scroll-snap-type Egenskapen.

Exempel

Exempel 1

Ställ in inre sidpadding i riktningen inline från kont容erens ände till positionen för alignment till 20px:

div {
  scroll-padding-inline-end: 20px;
}

Prova själv

Exempel 2: Bildbibliotek

scroll-padding-inline-end Egenskapen kan användas i gallerier med align-beteende för att driva bilder från bakom en fast element:

#container {
  scroll-padding-inline-end: 30px;
}

Prova själv

Exempel 3

När kont容erelementets writing-mode När egenskapsvärdet sätts till 'vertical-rl' flyttas början av kont容eren och dess barn inåt i riktningen inline till toppen, medan ändarna flyttas till botten. Detta påverkar scroll-align-beteendet samt scroll-padding-inline-end Sättet egenskapen fungerar:

#container {
  scroll-padding-inline-end: 20px;
  writing-mode: vertical-rl;
}

Prova själv

Exempel 4

När kont容erelementets direction När egenskapsvärdet sätts till 'rtl' flyttas ändarna av kont容eren och dess barn inåt i riktningen inline till vänster. Detta påverkar scroll-align-beteendet samt scroll-padding-inline-end Sättet egenskapen fungerar:

#container {
  scroll-padding-inline-end: 20px;
  direction: rtl;
}

Prova själv

CSS-syntax

scroll-padding-inline-end: auto|value|initial|inherit;

Egenskapsvärde

Tekniska detaljer

Webbläsarstöd

Talen i tabellen representerar den första webbläsarversionen som helt stöder detta egenskap.

Relaterade sidor

Referens:CSS direction egenskap

Referens:CSS scroll-snap-align egenskap

Referens:CSS scroll-snap-type egenskap

Referens:CSS writing-mode egenskap