CSS scroll-margin egenskap

Definition och användning

scroll-margin Attributet specificerar avståndet mellan anslutningspositionen och behållaren.

Detta innebär att när du stoppar rullningen, justeras rullningen snabbt och stoppas på en anslutningsposition (snap position) som är angiven av en viss avstånd till behållaren.

Anslutningspositionen är den position där ett underliggande element fäster sig i behållaren när rullningen stoppas.

scroll-margin Attributet är en förkortning av följande attribut:

scroll-margin Attributvärden kan ställas in på olika sätt:

Om scroll-margin-attribut har fyra värden:

scroll-margin: 15px 30px 60px 90px;
  • Toppavståndet är 15px
  • Högeravståndet är 30px
  • Bottenavståndet är 60px
  • Vänsteravståndet är 90px

Om scroll-margin-attribut har tre värden:

scroll-margin: 15px 30px 60px;
  • Toppavståndet är 15px
  • avstånden på vänster och höger sida är 30px
  • Bottenavståndet är 60px

Om scroll-margin-attribut har två värden:

scroll-margin: 15px 30px;
  • avstånden på toppen och botten är 15px
  • avstånden på vänster och höger sida är 30px

Om scroll-margin-egenskapen har ett värde:

scroll-margin: 10px;
  • avstånden i alla fyra riktningar är 10px

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

Observera:I följande exempel har alla sidor satts in rullmarginalen, men på grund av scroll-snap-align Egenskapen är satt till "start", så endast den övre rullmarginalen ändras i rullningsbeteendet.

Exempel

Exempel 1

Ställ in rullmarginalen mellan fastställningspositionen och behållaren till 20px:

div {
  scroll-margin: 20px;
}

Prova själv

Exempel 2: Bildbibliotek

scroll-margin Egenskapen kan användas i bildbibliotek med fästverkan. Härinom,scroll-margin Låt användaren se 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: 0 0 0 30px;
}
Beijing Dansare Wuhan Tulpan Hangzhou

Prova själv

Exempel 3: Ställ in rullmarginalen på botten och höger sida

Kan sättas på elementets botten och högra sida scroll-margin Egenskap. Horisontell och vertikal rullning till nästa element visar effekten:

#container > div {
  scroll-margin: 0 10px 30px 0;
}





Prova själv

CSS-syntax

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

Egenskapsvärde

Värde Beskrivning
0 Rullmarginalen är noll. Standardvärde.
length

Specificera med px, pt, cm etc. som enhet för rullmarginalen. Negativa värden är tillåtna.

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

Tekniska detaljer

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

Webbläsarstöd

Tal i tabellen representerar den första webbläsarens version som helt stöder egenskapen.

Chrome Edge Firefox Safari Opera
69.0 79.0 90.0 14.1 56.0

Relaterade sidor

Referens:CSS scroll-margin-bottom egenskap

Referens:CSS scroll-margin-left egenskap

Referens:CSS scroll-margin-right egenskap

Referens:CSS scroll-margin-top egenskap

Referens:CSS scroll-snap-align egenskap

Referens:CSS scroll-snap-type egenskap