CSS scroll-padding-block egenskab

Definition og brug

scroll-padding-block Egenskaben specificerer afstanden fra beholderen til fastgørelsespositionen af underelementet i blokretningen.

Dette betyder, at når du stopper med at rulle, vil rulningen hurtigt justere og stoppe på en afstand specificeret mellem fastgørelsespositionen og beholderen i blokretningen.

Blokretningen er retningen, hvor næste række placeres i forhold til den eksisterende rækkeposition, hvilket også er måden, blokdele (som <p> og <div>-etiketter) er arrangeret på siden. Blokretningen afhænger af skriftsproget, for eksempel, i mongolsk er nye linjer arrangeret fra venstre til højre, så blokretningen er også fra venstre til højre, mens engelske sider har en nedadgående blokretning. Blokretningen kan defineres ved hjælp af CSS-egenskaben writing-mode definere.

Fastgørelsespositionen er den position, hvor underelementet i beholderen suger til, når du stopper med at rulle.

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

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

• scroll-padding-block-start
• scroll-padding-block-end

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

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

scroll-padding-block: 10px 50px;

• Afstanden fra begyndelsen er 10px
• Afstanden fra slutningen er 50px

Hvis scroll-padding-block-egenskaben har en værdi:

scroll-padding-block: 10px;

• Afstanden fra begyndelsen og slutningen er begge 10px

For at se scroll-padding-block Effekten af egenskaben skal indstilles på underelementet scroll-snap-align egenskaben, og sæt scroll-padding-block og scroll-snap-type egenskaberne.

CSS scroll-padding-block og scroll-padding-inline egenskaberne er ens med CSS-egenskaberne CSS scroll-padding-top egenskab,scroll-padding-bottom,scroll-padding-left og scroll-padding-right er meget lignende, men scroll-padding-block og scroll-padding-inline Egenskaben afhænger af blokretning og inline-rettning.

Eksempel

Eksempel 1

Sæt skrollingsindre margen i blokretningen til 20px fra containeren til snap-positionen:

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

Prøv det selv

Eksempel 2: Billedbibliotek

scroll-padding-block Egenskaben kan bruges til gallerier med snap-adfærd til at skubbe billeder under faste elementer:

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

Prøv det selv

Eksempel 3

Når container-elementets writing-mode Når egenskabsværdien sættes til vertical-rl, flytter startpositionen for containeren og dets underelementer i blokretningen fra toppen til højre og slutpositionen fra bunden til venstre. Dette påvirker scroll-snap-adfærd samt scroll-padding-block Arbejdsmåden for egenskaben:

#container {
  scroll-padding-block: 20px 0;
  writing-mode: vertical-rl;
}

Prøv det selv

CSS syntaks

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

Egenskabsværdi

Tekniske detaljer

Browser understøttelse

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

Relaterede sider

Referencer:CSS scroll-padding-block-end egenskab

Referencer:CSS scroll-padding-block-start egenskab

Referencer:CSS scroll-snap-align egenskab

Referencer:CSS scroll-snap-type egenskab

Referencer:CSS writing-mode egenskab