CSS scroll-padding-top eigenschap

Definitie en gebruik

scroll-padding-top De eigenschap specificeert de afstand van het container naar de afdichtingspositie van het subelement.

De afdichtingspositie verwijst naar de positie waarin de subelementen in het container zijn geadopteerd bij het stoppen van het rollen.

} scroll-snap-align 吸附位置 wordt Instellingen, maar kan ook worden beïnvloed door CSS eigenschappen en writing-mode Eigenschap

Het effect.Let op:

Dit eigenschap is alleen effectief wanneer de吸附positie is ingesteld op de top van het subelement. scroll-padding-top Om scroll-snap-align Eigenschappen, en吸附gedrag moet worden ingesteld op de ouderlijke element, de effecten van scroll-padding-top en scroll-snap-type Eigenschap.

Voorbeeld

Voorbeeld 1

Stel de scroll-padding-top in op 20px van de top van het container naar de吸附positie:

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

Probeer het zelf

Voorbeeld 2: Afbeeldingsbibliotheek

scroll-padding-top De eigenschap kan worden gebruikt in een galerij met吸附gedrag om afbeeldingen onder een vast element te duwen:

#container {
  scroll-padding-top: 30px;
}

Probeer het zelf

Voorbeeld 3: Instellen van scroll-padding-top aan de top

Wanneer吸附gedrag is ingesteld in beide richtingen, kan ook吸附gedrag worden ingesteld op het container: scroll-padding-top De eigenschap. Schuif verticaal naar beneden naar het volgende element om het effect te zien:

#container {
  scroll-padding-top: 30px;
}

Probeer het zelf

Voorbeeld 4:吸附位置

Om scroll-padding-top De eigenschap werkt, de吸附位置 moet ingesteld worden op de top van de subelementen. In dit voorbeeld:writing-mode De eigenschap verandert de吸附位置 van de subelementen van de top naar de rechterkant. Bij het gebruik van deze code:scroll-padding-top De eigenschap werkt niet meer:

#container {
  writing-mode: vertical-rl;
  scroll-padding-top: 30px;
}
#container > div {
  scroll-snap-align: start none;
}

Probeer het zelf

CSS syntaxis

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

Eigenschapswaarde

Waarde Beschrijving
auto Standaardwaarde. De browser berekent de binnenste marge.
length

Specificeer scroll-padding-top met eenheid zoals px, pt, cm.

Negatieve waarden zijn niet toegestaan. Raadpleeg:CSS Eenheid.
% Specificeer de percentage van de breedte van de elementen die de binnenste marge omvat.
initial Stel deze eigenschap in op zijn standaardwaarde. Raadpleeg initial.
inherit Deze eigenschap wordt overgenomen van de ouderlijke element. Raadpleeg inherit.

Technische details

Standaardwaarde: auto
Inheritantie: Nee
Animatie maken: Niet ondersteund. Raadpleeg:Animatiegerelateerde eigenschappen.
Versie: CSS3
JavaScript syntaxis: object.style.scrollPaddingTop="20px"

Browserondersteuning

Tafelnummers geven de browserversie aan die de eigenschap volledig ondersteunt.

Chrome Edge Firefox Safari Opera
69.0 79.0 68.0 14.1 56.0

Gerelateerde pagina's

Referentie:CSS richting eigenschap

Referentie:CSS scroll-snap-align eigenschap

Referentie:CSS scroll-snap-type eigenschap

Referentie:CSS writing-mode eigenschap