CSS scroll-padding-top egenskab

Definition og brug

scroll-padding-top Egenskaben angiver afstanden fra beholderens top til underelementets fastgørelsesposition.

Fastgørelsespositionen refererer til den position, hvor et underelement absorberes i beholderen, når rulningen stopper.

Fastgørelsespositionen af scroll-snap-align Egenskab, men kan også påvirkes af CSS-egenskaben direction og writing-mode indstilling af

påvirkningen.Bemærk:

dette egenskab er kun gyldigt, når fastgørelsespositionen er indstillet til toppen af underelementet. scroll-padding-top Egenskabseffekten skal indstilles på underelementet for at se scroll-snap-align Egenskaben, og indstil scroll-padding-top og scroll-snap-type Egenskab.

Eksempel

Eksempel 1

Indstil rullemargin til afstanden fra kontainerens top til fastgørelsespositionen til 20px:

div {
  scroll-padding-top: 20px;
}

Prøv det selv

Eksempel 2: Bildegalleri

scroll-padding-top Egenskaben kan bruges i gallerier med fastgørelsesadferd til at skubbe billeder ned under faste elementer:

#container {
  scroll-padding-top: 30px;
}

Prøv det selv

Eksempel 3: Indstilling af rullemargin i toppen

Når der er indstillet fastgørelsesadferd i begge retninger, kan du også indstille scroll-padding-top Egenskaben. Rul lodret til næste element for at se effekten:

#container {
  scroll-padding-top: 30px;
}

Prøv det selv

Eksempel 4: Fastgørelsesposition

For at gøre scroll-padding-top Egenskaben virker, og fastgørelsespositionen skal indstilles til toppen af underelementet. I dette eksempel:writing-mode Egenskaben ændrer fastgørelsespositionen fra toppen af underelementet til højre. Brug denne kode, når:scroll-padding-top Egenskaben vil ikke længere fungere:

#container {
  writing-mode: vertical-rl;
  scroll-padding-top: 30px;
}
#container > div {
  scroll-snap-align: start none;
}

Prøv det selv

CSS syntaks

scroll-padding-top: auto|value|initial|inherit;

Egenskabsværdi

Værdi Beskrivelse
auto Standardværdi. Browseren beregner indrykning.
length

Angiv med enheder som px, pt, cm osv. for scroll-padding-top.

Negativ værdi er ikke tilladt. Se:CSS enheder.
% Angiv en procentdel af elementets bredde som indrykning.
initial Sæt denne egenskab til dens standardværdi. Se: initial.
inherit Arv denne egenskab fra forældrelementet. Se: inherit.

Tekniske detaljer

Standardværdi: auto
Arv: Nej
Animationsproduktion: Ikke understøttet. Se:Animationsrelaterede egenskaber.
Version: CSS3
JavaScript syntaks: object.style.scrollPaddingTop="20px"

Browserstøtte

Tabellennumre angiver 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 retning egenskab

Referencer:CSS scroll-snap-align egenskab

Referencer:CSS scroll-snap-type egenskab

Referencer:CSS writing-mode egenskab