CSS scroll-padding-inline-end eigenschap

Definitie en gebruik

scroll-padding-inline-end De eigenschap specificeert de afstand in de richting van de inline tussen het einde van de container en de uitlijnpositie van het subelement.

Dit betekent dat, wanneer je stopt met rollen, de rol snel wordt aangepast en stopt op de afstand die is gespecificeerd tussen de uitlijnpositie en de container.

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

De uitlijnpositie verwijst naar de positie waarin de subelementen in de container zich positioneren wanneer ze stoppen met滚る.

Let op:Deze eigenschap is alleen van toepassing op scroll-snap-align De eigenschap werkt alleen als de richting van de inline ingesteld is op 'end'.

om te zien scroll-padding-inline-end Eigenschapseffecten moeten op de onderliggende elementen worden ingesteld scroll-snap-align Eigenschappen, en stel op de ouder-element scroll-padding-inline-end en scroll-snap-type Eigenschap.

Voorbeeld

Voorbeeld 1

Stel de in-line richting van de scroll-insidespeling van het einde van het container tot de alignatielocatie in op 20px:

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

Probeer het zelf uit

Voorbeeld 2: Afbeeldingsbibliotheek

scroll-padding-inline-end De eigenschap kan worden gebruikt in een galerij met aligmentgedrag om afbeeldingen achter een vast element naar buiten te duwen:

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

Probeer het zelf uit

Voorbeeld 3

Wanneer het container-element writing-mode Wanneer de waarde van de eigenschap 'vertical-rl' is ingesteld, verandert de in-line richting van het begin van de container en de afzonderlijke elementen van links naar boven, en het einde van rechts naar beneden. Dit beïnvloedt het scroll-alignmentgedrag en scroll-padding-inline-end Hoe de eigenschap werkt:

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

Probeer het zelf uit

Voorbeeld 4

Wanneer het container-element direction Wanneer de waarde van de eigenschap 'rtl' is ingesteld, verandert de in-line richting van het einde van de container en de afzonderlijke elementen van rechts naar links. Dit beïnvloedt het scroll-alignmentgedrag en scroll-padding-inline-end Hoe de eigenschap werkt:

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

Probeer het zelf uit

CSS syntax

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

Eigenschapswaarde

Technische details

Browserondersteuning

De cijfers in de tabel geven de versie van de browser aan die de eigenschap volledig ondersteunt.

Relevante pagina

Referentie:CSS richting eigenschap

Referentie:CSS scroll-snap-align eigenschap

Referentie:CSS scroll-snap-type eigenschap

Referentie:CSS writing-mode eigenschap