CSS scroll-padding-inline-start egenskab

Kursus anbefaling:

scroll-padding-inline-start Definition og brug

egenskab specificerer afstanden fra beholderens startposition til adhæsionspositionen for underelementet i linje retning.

dette betyder, at når du stopper med at rulle, vil rullen hurtigt justere og stoppe på den adhæsionsposition, der er angivet i afstanden til beholderen. direction og writing-mode Linje retning er den retning, hvor den næste tegn placeres i forhold til den eksisterende tegn i linjen, hvilket også er layoutmetoden for etiketter med CSS display: inline; (som <a> og <strong> etiketter) i teksten. Linje retning afhænger af skrive sprog, for eksempel er de nye tegn i arabisk arrangeret fra højre til venstre, så linje retning er fra højre til venstre, mens linje retning på engelske sider er fra venstre til højre. Linje retning kan ændres ved hjælp af CSS egenskab

Definition.

Adhæsionsposition er den position, hvor underelementet i beholderen adhæsionspositionen når, når du stopper med at rulle.Bemærk: scroll-snap-align Denne egenskab er kun sat i linje retning.

efter egenskaben er 'start' vil den virke. scroll-padding-inline-start egenskabseffekten, og den skal sættes på underelementerne for at kunne se scroll-snap-align egenskab, og den skal sættes på forældrelementet scroll-padding-inline-start og scroll-snap-type egenskab.

Eksempel

Eksempel 1

Indstil scroll-indrykning i inline-richtung fra kontainerens startposition til sugningspositionen til 20px:

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

Prøv det selv

Eksempel 2: Billedbibliotek

scroll-padding-inline-start Egenskaben kan bruges i gallerier med sugningsevner til at skubbe billeder fra faste elementer bagud:

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

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 underelementer fra toppen til højre i inline-richtung. Dette påvirker scroll-sugning og scroll-padding-inline-start Arbejdsmåden for egenskaben:

#container {
  scroll-padding-inline-start: 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 underelementer fra højre til venstre i inline-richtung, og afslutningspositionen fra højre til bunden. Dette påvirker scroll-sugning og scroll-padding-inline Arbejdsmåden for egenskaben:

#container {
  scroll-padding-inline-start: 20px;
  diretion: rtl;
}

Prøv det selv

CSS syntaks

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

Egenskabsværdi

Tekniske detaljer

Browserunderstøttelse

Tabellen talene viser 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