CSS scroll-padding-block eigenschap

Definition and Usage

scroll-padding-block The attribute specifies the distance from the container to the吸附位置 of the child element in the block direction.

This means that when you stop scrolling, the scroll will quickly adjust and stop at the specified distance between the吸附位置 and the container in the block direction.

The block direction refers to the direction in which the next line is placed relative to the existing line position, which is also the layout method of elements with CSS display: block; (such as <p> and <div> tags) on the page. The block direction depends on the writing language, for example, in Mongolian, new lines are arranged from left to right, so the block direction is also from left to right, while on English pages, the block direction is downward. The block direction can be set through the CSS attribute writing-mode To define.

The吸附位置 refers to the position where the child element is吸附到位 in the container when you stop scrolling.

Note:This attribute is only valid in the block direction,scroll-snap-align The attribute is valid when set to 'start' or 'end'.

scroll-padding-block The attribute is a shorthand attribute of the following attributes:

• scroll-padding-block-start
• scroll-padding-block-end

scroll-padding-block The value of the attribute can be set in different ways:

If the scroll-padding-block attribute has two values:

scroll-padding-block: 10px 50px;

• The distance from the beginning is 10px
• The distance from the end is 50px

If the scroll-padding-block attribute has a value:

scroll-padding-block: 10px;

• The distance from the beginning and end is 10px

To see scroll-padding-block The effect of the attribute must be set on the child element scroll-snap-align eigenschap, en stel deze in op het ouder-element scroll-padding-block en scroll-snap-type .

de CSS-eigenschappen scroll-padding-block en scroll-padding-inline eigenschappen zijn vergelijkbaar met de CSS-eigenschappen CSS scroll-padding-top eigenschap,scroll-padding-bottom,scroll-padding-left en scroll-padding-right zeer vergelijkbaar, maar scroll-padding-block en scroll-padding-inline De eigenschap is afhankelijk van de blokkenrichting en de inlijnrichting.

Voorbeeld

Voorbeeld 1

Stel de scroll-binnenmarge in de blokkenrichting in op 20px van de container naar de aantrekkingspositie:

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

Probeer het zelf uit

Voorbeeld 2: Afbeeldingsbibliotheek

scroll-padding-block Deze eigenschap kan worden gebruikt voor een gallerij met aantrekkingskracht, om afbeeldingen onder een vast element te duwen:

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

Probeer het zelf uit

Voorbeeld 3

wanneer het element van de container writing-mode Wanneer de waarde van de eigenschap vertical-rl is ingesteld, verplaatst de startpositie van de container en de afzonderlijke elementen in de blokkenrichting van boven naar rechts en de eindpositie van onder naar links. Dit beïnvloedt het gedrag van het scrollen aan het einde van de lijn en scroll-padding-block Hoe de eigenschap werkt:

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

Probeer het zelf uit

CSS syntaxis

scroll-padding-block: 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-padding-block-end eigenschap

Referentie:CSS scroll-padding-block-start eigenschap

Referentie:CSS scroll-snap-align eigenschap

Referentie:CSS scroll-snap-type eigenschap

Referentie:CSS writing-mode eigenschap