CSS scroll-padding-block-start eigenschap

Definitie en gebruik

scroll-padding-block-start De eigenschap specificeert de afstand in de blokvorm van de startpositie van de container tot de aangehechte positie van het onderliggende element.

Dit betekent dat, wanneer je de scrollbalk stopt, de scrollbalk snel wordt aangepast en stopt op de afstand tussen de aangehechte positie en de container.

De blokvorm is de richting van de positie ten opzichte van de bestaande rij, waarin de volgende rij wordt geplaatst. Dit is ook de weergave van tags met CSS display: block; (zoals <p> en <div>-tags) op de pagina. De blokvorm hangt af van de schrijftaal, bijvoorbeeld, de nieuwe regel van het Mongools is van links naar rechts geordend, dus de blokvorm is van links naar rechts, terwijl de blokvorm van een Engelse pagina naar beneden is. De blokvorm kan worden aangepast via de CSS-eigenschap writing-mode definiëren.

De吸附positie is de positie waarop het onderdeel in het container wordt吸附when je ophoudt met scrollen.

Opmerking:Deze eigenschap is alleen van toepassing op de blokkenrichting van scroll-snap-align Eigenschap ingesteld op 'start' voordat het effect optreedt.

Zie scroll-padding-block-start Eigenschapseffect in het ouder element in, moet de scroll-snap-align Eigenschap, en stel de scroll-padding-block-start en scroll-snap-type Eigenschap.

Voorbeeld

Voorbeeld 1

Stel de blokkenrichting van de binnenste marge van de startpositie tot de吸附positie in op 20px:

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

Probeer het zelf uit

Voorbeeld 2: afbeeldingsbibliotheek

In een gallerij met吸附gedrag, kan scroll-padding-block-start De eigenschap duwt het afbeelding naar beneden van het vastgelegde element:

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

Probeer het zelf uit

Voorbeeld 3

Wanneer de container element writing-mode Wanneer de waarde van de eigenschap op vertical-rl is ingesteld, verplaatst de startpositie van het container in de blokkenrichting van de top naar de rechterkant. Dit beïnvloedt het吸附gedrag en scroll-padding-block-start Werkwijze van de eigenschap:

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

Probeer het zelf uit

CSS syntax

scroll-padding-block-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 scroll-snap-align eigenschap

Referentie:CSS scroll-snap-type eigenschap

Referentie:CSS writing-mode eigenschap