CSS scroll-padding-inline egenskab

Definition og brug

scroll-padding-inline egenskab specificerer afstanden fra beholderen til underelementets fastgørelsesposition i inline-rettningen.

dette betyder, at når du stopper med at rulle, vil rulningen hurtigt justere og stoppe på en fastgørelsesposition i forhold til beholderen.

inline-rettning refererer til retningen, hvor den næste tegn placeres i forhold til eksisterende tegn i en linje. Dette er også layoutmetoden for elementer med CSS display: inline; som f.eks. <a>- og <strong>-tagget i tekst. Inline-rettning afhænger af skriftsproget, f.eks. er de nye tegn i arabiske sprog arrangeret fra højre til venstre, hvilket gør inline-rettningen fra højre til venstre, mens engelske sider har en inline-rettning fra venstre til højre. Inline-rettning kan defineres ved hjælp af CSS-egenskaben direction og writing-mode definere.

fastgørelsespositionen refererer til den position, hvor et underelement i en beholder吸附 når du stopper med at rulle.

Bemærk:denne egenskab gælder kun i inline-rettningen,scroll-snap-align egenskaben er kun gyldig, når værdien sættes til 'start' eller 'end'.

scroll-padding-inline-egenskaben er en forkortelse for følgende egenskaber:

• scroll-padding-inline-start
• scroll-padding-inline-end

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

hvis scroll-padding-inline-egenskaben har to værdier:

scroll-padding-inline: 10px 50px;

• afstanden til begyndelsen er 10px
• afstanden til enden er 50px

hvis scroll-padding-inline-egenskaben har en værdi:

scroll-padding-inline: 10px;

• afstanden til begge ender er 10px

for at se scroll-padding-inline egenskabseffekten, skal den indstilles på underelementerne scroll-snap-align egenskab, og skal indstilles på forældrelementet scroll-padding-inline og scroll-snap-type egenskab.

CSS' scroll-padding-block og scroll-padding-inline egenskab og CSS-egenskab 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 indrykning.

Eksempel

Eksempel 1

Indstil indre rullemargin på tværs af indrykning, fra kontainer til fastgørelsesposition, til 20px:

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

Prøv det selv

Eksempel 2: Billedbibliotek

I en galleri med fastgørelsesadfærd kan man bruge scroll-padding-inline Egenskaben drager billedet ud bag en fast element:

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

Prøv det selv

Eksempel 3

Når kontainerens element writing-mode Når egenskabsværdien sættes til 'vertical-rl', flytter startpositionen for kontaineren og dens underliggende elementer på tværs af indrykning fra venstre til toppen, og slutpositionen fra højre til bunden. Dette påvirker adfærd for fastgørelse af rulning samt scroll-padding-inline Sådan virker egenskaben:

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

Prøv det selv

Eksempel 4

Når kontainerens element direction Når egenskabsværdien sættes til 'rtl', flytter startpositionen for kontaineren og dens underliggende elementer på tværs af indrykning til venstre fra højre. Dette påvirker adfærd for fastgørelse af rulning samt scroll-padding-inline Sådan virker egenskaben:

#container {
  scroll-padding-inline: 20px 0;
  direction: rtl;
}

Prøv det selv

CSS syntaks

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

Egenskabsværdi

Tekniske detaljer

Browserunderstøttelse

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

Relaterede sider

Referencer:CSS direction egenskab

Referencer:CSS scroll-snap-align egenskab

Referencer:CSS scroll-snap-type egenskab

Referencer:CSS writing-mode egenskab