CSS scroll-padding-inline-start egenskap

Definition och användning

scroll-padding-inline-start egenskapen specificerar avståndet från behållarens startposition till anslutningspositionen för underelementet i inre riktningen.

Detta innebär att när du stoppar med att rulla, justeras rullen snabbt och stoppar på den avstånd som anges mellan anslutningspositionen och behållaren.

Inre riktning är den riktning som nästa tecken placeras i raden i förhållande till 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 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 definieras med CSS-attribut direction och writing-mode Definition.

Anslutningspositionen är den plats där underelementen i behållaren ansluter sig när du stoppar med att rulla.

Observera:Denna egenskap sätter endast inre riktning scroll-snap-align egenskapen är 'start' fungerar den.

efter att scroll-padding-inline-start egenskapens effekt måste sättas på på underelementen för att kunna se scroll-snap-align egenskap och måste sättas på föräldrelementet scroll-padding-inline-start och scroll-snap-type Egenskapen.

Exempel

Exempel 1

Ställ in skrollinre marginalen från kont容ets startposition till fixeringspositionen på inre riktningen till 20px:

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

Prova själv

Exempel 2: Bildbibliotek

scroll-padding-inline-start Egenskapen kan användas i gallerier med fixerad rullning för att driva bilderna från bakom den fastsatta elementet:

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

Prova själv

Exempel 3

När kont容elementets writing-mode När egenskapsvärdet sätts till 'vertical-rl' flyttas startpositionen för kont容en och dess underliggande element från toppen till höger på inre riktningen. Detta påverkar scrollfixeringen och scroll-padding-inline-start Sättet egenskapen fungerar:

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

Prova själv

Exempel 4

När kont容elementets direction När egenskapsvärdet sätts till 'rtl' flyttas startpositionen för kont容en och dess underliggande element från höger till vänster på inre riktningen, och slutpositionen från höger till botten. Detta påverkar scrollfixeringen och scroll-padding-inline Sättet egenskapen fungerar:

#container {
  scroll-padding-inline-start: 20px;
  diretion: rtl;
}

Prova själv

CSS-syntax

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

Egenskapsvärde

Tekniska detaljer

Webbläsarstöd

Talen i tabellen representerar den första webbläsarversion som helt stöder egenskapen.

Relaterade sidor

Referens:CSS direction egenskap

Referens:CSS scroll-snap-align egenskap

Referens:CSS scroll-snap-type egenskap

Referens:CSS writing-mode egenskap