CSS scroll-padding-right egenskap

Definition och användning

scroll-padding-right egenskapen specificerar avståndet från behållarens högra sida till fästplatsen för underkomponenten.

fästplatsen refererar till den plats där underkomponenten fäster sig i behållaren när rullningen stoppas.

fästplatsen bestäms av scroll-snap-align egenskapsinställningar, men kan också påverkas av CSS-egenskaper direction och writing-mode påverkan.

Varning:Denna egenskap är endast effektiv när fästen positionen är satt på höger sida av underelementet.

För att se scroll-padding-right egenskapens effekt på föräldrelementet, måste fästen sättas på scroll-snap-align egenskap, och sätt scroll-padding-right och scroll-snap-type egenskap.

Exempel

Exempel 1

Sätt scroll-padding-right till 20px från behållarens högra sida till fästen positionen:

div {
  scroll-padding-right: 20px;
}

Prova själv

Exempel 2: Bildbibliotek

scroll-padding-right Egenskapen kan användas för bildgallerier med fästen agerande för att driva bilderna från bakom den fastsatta elementet in i vyn:

#container > img {
  scroll-padding-right: 30px;
}

Prova själv

Exempel 3: Sätt scroll-padding-right på höger sida

När fästen agerandet är satt på båda hållen, kan också fästen sättas på behållaren: scroll-padding-right egenskap. Rulla horisontellt till nästa element för att se effekten:

#container > div {
  scroll-padding-right: 30px;
}

Prova själv

Exempel 4: Fästen position

För att göra scroll-padding-right egenskapen träder i kraft, fästen måste sättas på höger sida av underelementet. I detta exempel:direction Värdet 'rtl' kommer att fästa positionen från höger sida av underelementet till vänster sida. När du använder detta kodexempel:scroll-padding-right Egenskaper kommer inte att fungera:

#container {
  direction: rtl;
  scroll-padding-right: 30px;
}
#container > div {
  scroll-snap-align: none end;
}

Prova själv

CSS-syntaks

scroll-padding-right: auto|value|initial|inherit;

Egenskapsvärde

Värde Beskrivning
auto Standardvärde. Webbläsaren beräknar inre marginal.
length

Ange scroll-padding-right i enheter som px, pt, cm m.m.

Negativa värden tillåts inte. Se:CSS enheter.
% Specificera en procentandel av elementets bredd som inre marginal.
initial Sätt denna egenskap till dess standardvärde. Se: initial.
inherit Följande från dess föräldrelement. Se: inherit.

Tekniska detaljer

Standardvärde: auto
Arvande: Nej
Animation tillverkning: Stöds inte. Se:Animation relaterade egenskaper.
Version: CSS3
JavaScript-syntaks: object.style.scrollPaddingRight="20px"

Webbläsarstöd

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

Chrome Edge Firefox Safari Opera
69.0 79.0 68.0 14.1 56.0

Relaterade sidor

Referens:CSS riktning egenskap

Referens:CSS scroll-snap-align egenskap

Referens:CSS scroll-snap-type egenskap

Referens:CSS writing-mode egenskap