CSS scroll-margin egenskab

Definition og brug

scroll-margin Egenskaben specificerer afstanden mellem fastgørelsespositionen og containeren.

Dette betyder, at når du stopper med at rulle, vil rulningen hurtigt justere og stoppe i en fastgørelsesposition (snap position) og en angiven afstand til containeren.

Fastgørelsesposition er den position, som et underelement i en container fastgøres til, når rulningen stopper.

scroll-margin Egenskaben er en forkortelse af følgende egenskaber:

scroll-margin Egenskabets værdier kan indstilles på forskellige måder:

Hvis scroll-margin-egenskaben har fire værdier:

scroll-margin: 15px 30px 60px 90px;
  • Toppen afstand er 15px
  • Højre afstand er 30px
  • Bundens afstand er 60px
  • Venstre afstand er 90px

Hvis scroll-margin-egenskaben har tre værdier:

scroll-margin: 15px 30px 60px;
  • Toppen afstand er 15px
  • afstand til begge sider er 30px
  • Bundens afstand er 60px

Hvis scroll-margin-egenskaben har to værdier:

scroll-margin: 15px 30px;
  • afstand til toppen og bunden er 15px
  • afstand til begge sider er 30px

Hvis scroll-margin egenskaben har en værdi:

scroll-margin: 10px;
  • afstand til alle fire kanter er 10px

for at se scroll-margin Egenskabs effekt, skal indstilles på sønelementet scroll-margin og scroll-snap-align Egenskab, og sæt scroll-snap-type Egenskab.

Bemærk:I nedenstående eksempel er rullemarginen sat for alle kanter, men på grund af scroll-snap-align Egenskaben er sat til "start", så kun den øverste rullemargin ændrer rulleadfærd.

Eksempel

Eksempel 1

Indstil rullemarginen mellem吸附position og beholderen til 20px:

div {
  scroll-margin: 20px;
}

Prøv det selv

Eksempel 2: Billedbibliotek

scroll-margin Egenskaben kan bruges i billedbiblioteker med fastholdelsesevne. Her,scroll-margin Lad brugeren se, at der er et andet billede til venstre. Rul over det første billede for at se effekten:

#container > img {
  scroll-margin: 0 0 0 30px;
}
Beijing Dancer Wuhan Tulip Hangzhou

Prøv det selv

Eksempel 3: Indstil bund og højre rullemargin

Kan indstilles på elementets bund og højre side scroll-margin Egenskab. Hvis du ruller vandret og lodret til næste element, kan du se effekten:

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





Prøv det selv

CSS syntaks

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

Egenskabsværdi

Værdi Beskrivelse
0 Rullemargin er nul. Standardværdi.
length

Specificer med px, pt, cm osv. som enhed for rullemargin. Negative værdier er tilladt.

Se også:CSS Enheder.
initial Sæt denne egenskab til dens standardværdi. Se også initial.
inherit Arv denne egenskab fra forældrelementet. Se også inherit.

Tekniske detaljer

Standardværdi: 0
Arv: Nej
Animation laver: Ikke understøttet. Se også:Animation relaterede egenskaber.
Version: CSS3
JavaScript syntaks: object.style.scrollMargin="20px"

Browserunderstøttelse

Tallene i tabellen viser den første browserversion, der fuldt ud understøtter egenskaben.

Chrome Edge Firefox Safari Opera
69.0 79.0 90.0 14.1 56.0

Relaterede sider

Referencer:CSS scroll-margin-bottom egenskab

Referencer:CSS scroll-margin-left egenskab

Referencer:CSS scroll-margin-right egenskab

Referencer:CSS scroll-margin-top egenskab

Referencer:CSS scroll-snap-align egenskab

Referencer:CSS scroll-snap-type egenskab