CSS scroll-padding-right eigenschap

definitie en gebruik

scroll-padding-right eigenschap de afstand van het containerrechts naar de hechtingpositie van het subelement specificeren.

de hechtingpositie verwijst naar de positie waarin de subelementen in het container zijn gehecht bij het stoppen van het滚る.

de hechtingpositie bepaalt door scroll-snap-align eigenschap instellen, maar kan ook worden beïnvloed door CSS-eigenschappen direction en writing-mode invloed.

Let op:Deze eigenschap is alleen geldig wanneer de吸附positie ingesteld is op de rechterkant van het subelement.

Om scroll-padding-right Eigenschapseffect in het ouder element in, en stel de scroll-snap-align Eigenschappen, en stel de scroll-padding-right en scroll-snap-type Eigenschap.

Voorbeeld

Voorbeeld 1

Stel de scrollpadding in op een afstand van 20px van de rechterkant van de container naar de吸附positie:

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

Probeer het zelf uit

Voorbeeld 2: Afbeeldingsbibliotheek

scroll-padding-right De eigenschap kan gebruikt worden voor een galerij met吸附gedrag om afbeeldingen voorbij een固定的 element te drukken in het beeldveld:

#container > img {
  scroll-padding-right: 30px;
}

Probeer het zelf uit

Voorbeeld 3: Scrollpadding instellen aan de rechterkant

Als er op beide richtingen吸附gedrag is ingesteld, kan ook op de container吸附gedrag worden ingesteld scroll-padding-right De eigenschap. Schuif horizontaal naar het volgende element om het effect te zien:

#container > div {
  scroll-padding-right: 30px;
}

Probeer het zelf uit

Voorbeeld 4: Aanhankelijke positie

Om scroll-padding-right De eigenschap is van kracht, de afhankelijke positie moet ingesteld worden op de rechterkant van het subelement. In dit voorbeelddirection De waarde van de eigenschap 'rtl' zal de positie van de afhankelijke positie van de subelementen van de rechterkant naar de linkerkant veranderen. Bij het gebruik van deze codescroll-padding-right De eigenschap zal niet meer werken:

#container {
  direction: rtl;
  scroll-padding-right: 30px;
}
#container > div {
  scroll-snap-align: none end;
}

Probeer het zelf uit

CSS syntax

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

Eigenschapswaarde

Technische details

Browserondersteuning

De cijfers in de tabel geven de browserversie aan 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