CSS scroll-padding-block-start egenskap

Definition och användning

scroll-padding-block-start Attributet specificerar avståndet från behållarens startposition till fästplatsen för underkomponenten i blockriktningen.

Detta innebär att när du stoppar med att rulla, justeras rullningen snabbt och stoppar vid den angivna avståndet mellan fästplatsen och behållaren i blockriktningen.

Blockriktning är den position som nästa rad placeras i förhållande till den nuvarande raden. Detta är också layoutmetoden för etiketter med CSS display: block; som t.ex. <p>- och <div>-etiketter på sidan. Blockriktningen beror på skrivspråket, till exempel är nya rader i mongoliska arrangerade från vänster till höger, så blockriktningen är från vänster till höger, medan blockriktningen på engelska sidor är nedåt. Blockriktningen kan justeras genom CSS-attribut writing-mode to define.

The snap position refers to the position where the child element snaps to in the container when you stop scrolling. It is defined by

Note:This attribute is only in the block direction scroll-snap-align attribute takes effect only when set to 'start'.

to see scroll-padding-block-start attribute on the parent element, and set scroll-snap-align attributes, and set the scroll-padding-block-start and scroll-snap-type attribute.

Instance

Example 1

Set the block direction scroll inner padding from the container starting position to the snap position to 20px:

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

Try it yourself

Example 2: Image library

In a gallery with snap behavior, you can use scroll-padding-block-start The attribute pushes the image below the fixed element:

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

Try it yourself

Example 3

When the container element's writing-mode When the attribute value is set to vertical-rl, the container's starting position in the block direction and the child elements move from top to right. This affects the scroll snapping behavior and scroll-padding-block-start How the attribute works:

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

Try it yourself

CSS Syntax

scroll-padding-block-start: auto|value|initial|inherit;

Attribute value

Technical details

Browser Support

The numbers in the table represent the first browser version to fully support this property.

Relaterade sidor

Referens:CSS scroll-snap-align egenskap

Referens:CSS scroll-snap-type egenskap

Referens:CSS writing-mode egenskap