CSS scroll-margin-inline egenskab

Definition og brug

scroll-margin-inline Egenskaben angiver afstanden mellem fastgørelsespositionen og beholderen i indrykningsretningen.

Dette betyder, at når du stopper med at rulle, vil rulningen hurtigt justere og stoppe på den angivne afstand i indrykningsretningen, som er den afstand mellem fastgørelsespositionen og beholderen.

Indrykning henviser til retningen, hvor den næste tegn placeres i forhold til den eksisterende tegn i rækken, hvilket også er layoutmetoden for etiketter med CSS display: inline; (som <a>- og <strong>-etiketter) i teksten. Indrykning henviser til skriftsprog, for eksempel er de nye tegn i arabisk arrangeret fra højre til venstre, så indrykning henviser til højre til venstre, mens indrykning på en engelsk side er fra venstre til højre. Indrykning kan ændres via CSS-egenskaben direction og writing-mode Definition.

Fastgørelsespositionen er den position, hvor underelementet fastgøres i beholderen, når rulningen stopper.

scroll-margin-inline Egenskaben er en forkortelse for følgende egenskaber:

• scroll-margin-inline-start
• scroll-margin-inline-end

Hvis scroll-margin-inline-egenskaben har to værdier:

scroll-margin-inline: 20px 70px;

• Afstanden fra begyndelsen er 20px
• Afstanden fra afslutningen er 70px

Hvis scroll-margin-inline-egenskaben har en værdi:

scroll-margin-inline: 20px;

• Afstanden fra begyndelsen og afslutningen er begge 20px

For at se scroll-margin-inline Effekten af egenskaben skal indstilles på underelementet scroll-margin-inline og scroll-snap-align egenskapen, og sett den på overordnede element. scroll-snap-type egenskapen.

CSS scroll-margin-inline og scroll-margin-block egenskapen er lik CSS-egenskapen CSS scroll-margin-top egenskab,scroll-margin-bottom,scroll-margin-left og scroll-margin-right er meget lik, men scroll-margin-block og scroll-margin-inline Egenskapen avhenger av blokkretning og innskrivende retning.

Eksempel

Eksempel 1

Sett på innskrivende retning, avstanden fra festepunktet til rullbart konteiner:

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

Prøv det selv

Eksempel 2

Når <div>-elementets writing-mode Når egenskapsverdien er satt til vertical-rl, er den innskrivende retningen nedover. Resultatet er at elementets startposisjon flyttes fra venstre til toppen, og elementets sluttposisjon flyttes fra høyre til bunnen. Dette påvirker også scroll-margin-inline Egenskap:

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

Prøv det selv

Eksempel 3

Når <div>-elementets direction Når egenskapsverdien er satt til rtl, er den innskrivende retningen fra høyre til venstre. Resultatet er at elementets startposisjon flyttes fra venstre til høyre, og elementets sluttposisjon flyttes fra høyre til venstre. Dette påvirker også scroll-margin-inline Egenskap:

div {
  scroll-margin-inline: 0 20px;
  direction: rtl;
}

Prøv det selv

CSS syntaks

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

Egenskapsverdi

Tekniske detaljer

Nettleserstøtte

Tabletets tal viser den første nettleserversjonen som fullt ut støtter denne egenskapen.

Relaterede sider

Referencer:CSS direction egenskab

Referencer:CSS scroll-margin-inline-end egenskab

Referencer:CSS scroll-margin-inline-start egenskab

Referencer:CSS scroll-snap-align egenskab

Referencer:CSS scroll-snap-type egenskab

Referencer:CSS writing-mode egenskab