CSS scroll-padding-top egenskap

Definition och användning

scroll-padding-top Egenskapen specificerar avståndet från behållarens topp till anslutningspositionen för underliggande element.

Anslutningspositionen är den plats där underliggande elementet fäster i behållaren när rullningen stoppas.

Fästen position är scroll-snap-align Egenskapen inställningar, men kan också påverkas av CSS egenskapen direction och writing-mode påverkan.

Observera:Denna egenskap är endast effektiv när fästen positionen är på toppen av underliggande elementet.

För att se scroll-padding-top Egenskapen på föräldrelementet, för att se effekten av scroll-snap-align Egenskapen, och sätt in scroll-padding-top och scroll-snap-type Egenskapen.

Exempel

Exempel 1

Sätt rullinre marginal till 20px från toppen av behållaren till fästen positionen:

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

Prova själv

Exempel 2: Bildbibliotek

scroll-padding-top Egenskapen kan användas i gallerier med fästen handling för att driva bilderna under fast elementet:

#container {
  scroll-padding-top: 30px;
}

Prova själv

Exempel 3: Sätt rullinre marginal på toppen

När du har satt fästen handlingar i båda riktningarna, kan du också sätta scroll-padding-top Egenskapen. Rulla vertikalt till nästa element för att se effekten:

#container {
  scroll-padding-top: 30px;
}

Prova själv

Exempel 4: Fästen position

För att göra scroll-padding-top Egenskapen är aktiverad, fästen position måste ställas in på toppen av underliggande element. I detta exempel,writing-mode Egenskapen kommer att fästa positionen från toppen av underliggande element till höger. När du använder detta kod,scroll-padding-top Egenskapen kommer inte att fungera längre:

#container {
  writing-mode: vertical-rl;
  scroll-padding-top: 30px;
}
#container > div {
  scroll-snap-align: start none;
}

Prova själv

CSS-syntaks

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

Egenskapsvärde

Värde Beskrivning
auto Standardvärde. Webbläsaren räknar ut inre marginalen.
length

Specificera scroll-padding-top i enheter som px, pt, cm osv.

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

Tekniska detaljer

Standardvärde: auto
Arv: Nej
Animační vytvoření: Stöds inte. Se till:Animation relaterade egenskaper.
Version: CSS3
JavaScript-syntaks: object.style.scrollPaddingTop="20px"

Webbläsarstöd

Tabellen siffror representerar den första webbläsarens version som fullständigt 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-snap-align egenskap

Referens:CSS scroll-snap-type egenskap

Referens:CSS writing-mode egenskap