CSS scroll-margin-left egenskap

Definición och användning

scroll-margin-left 属性指定吸附位置与容器之间的距离。

Egenskapen specificerar avståndet mellan fästpositionen och behållaren. scroll-snap-align Fästpositionen är den position där underelementet fastnar i behållaren när rullningen stoppas. Fästpositionen specificeras genom direction och Egenskapen inställningar, men kan också påverkas av CSS egenskapen writing-mode

påverkan.Observera:

Denna egenskap är endast effektiv när fästpositionen är satt till vänster sida av underelementet. scroll-margin-left Egenskapens effekt måste sättas in i underelementet för att se: scroll-margin-left och scroll-snap-align Egenskapen och sätt in scroll-snap-type Egenskapen.

Exempel

Exempel 1

Ställ in fästpositionen och rullmarginalen till 20px till behållaren:

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

Prova själv

Exempel 2: Bildbibliotek

scroll-margin-left Egenskapen kan användas i en bildgalleri med fästposition. Här:scroll-margin-left Låt användaren veta att det finns ett annat bild på vänster sida. Rulla över det första bildet för att se effekten:

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

Prova själv

Exempel 3: Fästposition

För att göra scroll-margin-left Egenskapen är aktiv, och fästpositionen måste sättas till vänster sida av underelementet. I detta exempel:direction Egenskapen ändrar fästpositionen från vänster sida av underelementet till höger sida. Använd följande kod:scroll-margin-left Egenskapen kommer inte att fungera längre:

#container {
  direction: rtl;
}
#container > div {
  scroll-margin-left: 30px;
  scroll-snap-align: none start;
}

Prova själv

CSS-syntax:

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

Egenskapsvärde

Värde Beskrivning
0 ScrollMarginsLeft är 0. Standardvärde.
length

Ange värdet för scrollMarginsLeft i enheter som px, pt, cm m.m. Negativa värden är tillåtna.

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

Tekniska detaljer

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

Webbläsarstöd

Tabellens siffror representerar den första webbläsarens version 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