CSS scroll-padding-inline-start eigenschap

Definitie en gebruik

scroll-padding-inline-start property specificeert de afstand van de startpositie van het container tot de aantrekkingskrachtige positie van het onder-element in de inline-richting.

Dit betekent dat de scroll wanneer je het scrollen stopt, snel wordt aangepast en stopt op de afstand tussen de aantrekkingskrachtige positie en het container die is gespecificeerd.

De inline-richting is de richting waarin de volgende character ten opzichte van het huidige character in de regel wordt geplaatst, wat ook de layoutmethode is van tags met CSS display: inline; (zoals <a> en <strong>-tags) in de tekst. De inline-richting hangt af van de schrijfrichting van de taal, bijvoorbeeld worden nieuwe characters in het Arabisch van rechts naar links gerangschikt, dus de inline-richting is van rechts naar links, terwijl de inline-richting op Engelse pagina's van links naar rechts is. De inline-richting kan worden ingesteld via de CSS-eigenschap direction en writing-mode definieert.

De aantrekkingskrachtige positie is de positie waarin het onder-element in het container is aangegetrokken wanneer je het scrollen stopt.

Opmerking:Deze property werkt alleen in de inline-richting. scroll-snap-align als de waarde van de property 'start' is.

om te zien scroll-padding-inline-start op het onder-element instellen scroll-snap-align op het ouder-element instellen scroll-padding-inline-start en scroll-snap-type Eigenschap.

Voorbeeld

Voorbeeld 1

Stel de scroll-inbuismarge van de startpositie van de container tot de adsorptiepositie in de inline-richting in op 20px:

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

Probeer het zelf uit

Voorbeeld 2: afbeeldingsbibliotheek

scroll-padding-inline-start De eigenschap kan worden gebruikt in een galerij met adsorptiegedrag om afbeeldingen naar voren te duwen achter een vast element:

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

Probeer het zelf uit

Voorbeeld 3

Wanneer de elementweergave van de container writing-mode Wanneer de waarde van de eigenschap 'vertical-rl' is ingesteld, verandert de startpositie van de container en zijn nakomelingen in de inline-richting van de top naar de rechterkant. Dit beïnvloedt het scroll-adsorptiegedrag en scroll-padding-inline-start Hoe de eigenschap werkt:

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

Probeer het zelf uit

Voorbeeld 4

Wanneer de elementweergave van de container direction Wanneer de waarde van de eigenschap 'rtl' is ingesteld, verandert de startpositie van de container en zijn nakomelingen in de inline-richting van de rechterkant naar de linker kant, en de eindpositie van de container en zijn nakomelingen van de rechterkant naar de onderkant. Dit beïnvloedt het scroll-adsorptiegedrag en scroll-padding-inline Hoe de eigenschap werkt:

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

Probeer het zelf uit

CSS-syntaxis

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

Eigenschapswaarde

Technische details

Browserondersteuning

De getallen in de tabel vertegenwoordigen de browserversie die de eigenschap volledig ondersteunt.

Gerelateerde pagina's

Referentie:CSS richting eigenschap

Referentie:CSS scroll-snap-align eigenschap

Referentie:CSS scroll-snap-type eigenschap

Referentie:CSS writing-mode eigenschap