CSS scroll-margin-right egenskap

定义和用法

scroll-margin-right egenskapen för att specificera avståndet mellan fästpositionen och behållaren.

Fästposition är den position där underelementet fastnar i behållaren när rullningen stoppas. Fästpositionen specificeras genom scroll-snap-align egenskapens instä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 högra sidan av underlementet.

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

Exempel

Exempel 1

Ställ in skrollmärgen mellan fästpositionen och behållaren till 20px:

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

Prova själv

Exempel 2: Bildbibliotek

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

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

Prova själv

Exempel 3: Fästposition

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

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

Prova själv

CSS-syntaks

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

Egenskapsvärde

Värde Beskrivning
0 Den högra sidan av scrollmärgen är 0. Standardvärde.
length

Ange värdet för den högra sidan av scrollmärgen i px, pt, cm m.m. Negativa värden är tillåtna.

Se till:CSS units.
initial Ange detta egenskap till dess standardvärde. Se till: initial.
inherit Följande egenskap från dess föräldrelement. Se till: inherit.

Tekniska detaljer

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

Webbläsarstöd

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

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