CSS scroll-padding egenskab

Definition og brug

scroll-padding Egenskaben specificerer afstanden fra containeren til underliggende elements fastgørelsesposition.

Dette betyder, at når du stopper med at rulle, vil rulningen hurtigt justere og stoppe på en afstand fra containeren til fokusområdet for det underliggende element, som er angivet.

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

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

scroll-padding Egenskabets værdi kan indstilles på forskellige måder:

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

scroll-padding: 15px 30px 60px 90px;
  • Top afstand er 15px
  • Højre afstand er 30px
  • Bund afstand er 60px
  • Venstre afstand er 90px

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

scroll-padding: 15px 30px 60px;
  • Top afstand er 15px
  • venstre og højre afstand er 30px
  • Bund afstand er 60px

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

scroll-padding: 15px 30px;
  • Top og bund afstand er 15px
  • venstre og højre afstand er 30px

Hvis scroll-padding egenskaben har en værdi:

scroll-padding: 10px;
  • afstande på alle fire kanter er 10px

for at se scroll-padding egenskaben på forældrelementet, så effekten af scroll-snap-align egenskaben, og indstil scroll-padding og scroll-snap-type egenskaben.

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

Eksempel

Eksempel 1

Indstil rullemarginen fra containeren til den fastgjorte position til 20px:

div {
  scroll-padding: 20px;
}

Prøv det selv

Eksempel 2: Billedbibliotek

scroll-padding Egenskaben kan bruges i gallerier med fastgjorte adfærd, for at skubbe billeder ned under den fastgjorte komponent:

#container {
  scroll-padding: 30px 0 0 0;
}
Fastgjort topkomponent
Beijing Dansker Wuhan Tulippe Hangzhou

Prøv det selv

Eksempel 3: Indstil bunden og højre rullemargin

scroll-padding Egenskaben kan indstilles på både bunden og højre side af containeren. Rul vandret og lodret til næste element for at se effekten:

#container {
  scroll-padding: 0 10px 30px 0;
}





Prøv det selv

CSS syntaks

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

Egenskabsværdi

Værdi Beskrivelse
auto Standardværdi. Browseren beregner indre margin.
length

Specificer med enheder som px, pt, cm osv. for rullemargin.

Negativ værdi er ikke tilladt. Se venligst:CSS Enhed.
% Specificer indre margin i procent af indholdsarealets bredde.
initial Sæt denne egenskab til dens standardværdi. Se: initial.
inherit Arver denne egenskab fra sin forældrelement. Se: inherit.

Tekniske detaljer

Standardværdi: auto
Arv: Nej
Animation: Ikke understøttet. Se venligst:Animation relaterede egenskaber.
Version: CSS3
JavaScript syntaks: object.style.scrollPadding="20px"

Browserunderstøttelse

Tallene i tabellen repræsenterer 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

Kilde:CSS scroll-padding-bottom egenskab

Kilde:CSS scroll-padding-left egenskab

Kilde:CSS scroll-padding-right egenskab

Kilde:CSS scroll-padding-top egenskab

Kilde:CSS scroll-snap-align egenskab

Kilde:CSS scroll-snap-type egenskab