CSS scroll-margin-top egenskap

Definering och användning

scroll-margin-top egenskapen för att specificera avståndet mellan fästpositionen och kontejnet.

Fästposition är den position där barnen fastnar i kontejnet när rullningen stoppas. Fästpositionen specificeras genom scroll-snap-align egenskapsinställning, men kan också påverkas av CSS-egenskapen direction och writing-mode påverkan.

Observera:Denna egenskap är endast effektiv när fästpositionen är satt till toppen av barnen.

För att se scroll-margin-top egenskapens effekt, måste sättas in i barnen. scroll-margin-top och scroll-snap-align egenskapen, och sätt in scroll-snap-type egenskapen.

Exempel

Exempel 1

Ställ in toppscrollmarginalen mellan fästpositionen och kontejnern till 20px:

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

Prova själv

Exempel 2: Bildbibliotek

scroll-margin-top Egenskapen kan användas i bildgallerier med fästposition. Här:scroll-margin-top Låt användaren veta att det finns en bild längre upp. Rulla över den första bilden för att se effekten:

#container > img {
  scroll-margin-top: 30px;
}

Prova själv

Exempel 3: Fästposition

För att göra scroll-margin-top Egenskapen är aktiv, och fästpositionen måste sättas till toppen av barnen. I detta exempel:writing-mode Egenskapen ändrar fästpositionen från toppen av barnen till höger. Använd följande kod:scroll-margin-top Egenskapen kommer inte att fungera längre:

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

Prova själv

CSS-syntax

scroll-margin-top: 0|value|initial|inherit;

Egenskapsvärde

Värde Beskrivning
0 Toppscrollmarginalen är 0. Detta är standardvärdet.
length

Specificera värdet för toppscrollmarginalen i enheter som px, pt, cm osv. Negativa värden är tillåtna.

Se också:CSS enheter.
initial Sätt denna egenskap till dess standardvärde. Se också: initial.
inherit Inhärta denna egenskap från föräldrelementet. Se också: inherit.

Tekniska detaljer

Standardvärde: 0
Arv: Nej
Animeringsproduktion: Stöds inte. Se också:Animeringsrelaterade egenskaper.
Version: CSS3
JavaScript-syntax: object.style.scrollMarginTop="20px"

Webbläsarstöd

Tabellens siffror representerar den första webbläsarversionen som helt 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