CSS scroll-margin-block egenskab

Definition og brug

scroll-margin-block Egenskaben angiver afstanden mellem fastgørelsespositionen (snap position) og beholderen i blokretningen.

Dette betyder, at når du stopper med at rulle, justeres rulningen hurtigt og stopper på en position, hvor fastgørelsespositionen i blokretningen og beholderen er angivet.

Blokretning er retningen, hvor næste række placeres i forhold til den eksisterende rækkeposition, hvilket også er måden, blokkendele med CSS display: block; (som f.eks. <p>- og <div>-etiketter) arrangeres på siden. Blokretning afhænger af skriftsprog, for eksempel, mongolsk arrangerer nye linjer fra venstre til højre, så blokretningen er også fra venstre til højre, mens blokretningen på engelske sider er nedadgående. Blokretning kan defineres ved hjælp af CSS-egenskaben writing-mode defineret.

Fastgørelsesposition er den position, hvor en underenhed fastgøres i beholderen, når rulningen stopper.

Bemærk:Denne egenskab er kun gyldig i blokretningen scroll-snap-align Egenskaben er gyldig, når værdien sættes til 'start' eller 'end'.

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

scroll-margin-block Værdien af egenskaben kan indstilles på forskellige måder:

Hvis scroll-margin-block-eegenskaben har to værdier:

scroll-margin-block: 10px 50px;
  • afstanden fra startpositionen er 10px
  • afstanden fra slutpositionen er 50px

hvis scroll-margin-block egenskaben har en værdi:

scroll-margin-block: 10px;
  • afstanden fra begge ender er 10px

for at se scroll-margin-block egenskaben på forældrelementet, skal scroll-margin-block og scroll-snap-align egenskaben, og sæt scroll-snap-type egenskaben.

CSS scroll-margin-inline og scroll-margin-block egenskaben er lignende til CSS-egenskaben CSS scroll-margin-top egenskab,scroll-margin-bottom,scroll-margin-left og scroll-margin-right er meget lignende, men scroll-margin-block og scroll-margin-inline Egenskaben afhænger af blokretningen og inline-retningen.

Eksempel

Eksempel 1

Indstil afstanden til sugningspositionen i blokretningen fra scrollbaret containeren:

div {
  scroll-margin-block: 10px;
}

Prøv det selv

Eksempel 2

Når underordnede elementers writing-mode Når egenskabsværdien sættes til vertical-rl, flyttes elementets startposition i blokretningen fra toppen til højre og slutpositionen fra bunden til venstre. Dette påvirker scroll-sugning og scroll-margin-block Arbejdsmåden for egenskaben:

div {
  scroll-margin-block: 20px 0;
  writing-mode: vertical-rl;
}

Prøv det selv

CSS syntaks

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

Egenskabsværdi

Værdi Beskrivelse
0 Standard. Elementets standard scroll-margin-block værdi.
length

Specificer afstande i enheder som px, pt, cm osv. Negative værdier er tilladt.

Se:CSS units.
initial Sæt denne egenskab til dens standardværdi. Se: initial.
inherit Arv denne egenskab fra sin forældrelement. Se: inherit.

Tekniske detaljer

Standardværdi: 0
Arv: Nej
Animation fremstilling: Ikke understøttet. Se:Animationsrelaterede egenskaber.
Version: CSS3
JavaScript syntaks: object.style.scrollMarginBlock="20px"

Browser understøttelse

Tabellen numre viser den første browserversion, der fuldt ud understøtter egenskaben.

Chrome Edge Firefox Safari Opera
69.0 79.0 68.0 14.1 56.0

Relaterede sider

Referencer:CSS scroll-margin-block-end egenskab

Referencer:CSS scroll-margin-block-start egenskab

Referencer:CSS scroll-snap-align egenskab

Referencer:CSS scroll-snap-type egenskab

Referencer:CSS writing-mode egenskab