CSS scroll-padding-block property

Description

CSS scroll-padding-block property represents padding at the start and end edges of the scroll container. Please move the scrollbar to see the effect of padding.

The selection of start and end sides depends upon the writing-mode.

  • The start and end sides are top and bottom sides respectively for horizontal-tb writing-mode.

  • The start and end sides are left and right sides respectively for vertical-* writing-mode.

Syntax

scroll-padding-block :+ve length

Property values

+ve lengthDefault

There is no padding at the start and end edges of the scroll container.

scroll-padding-block: 0px;

+ve length

It specifies the start and edges padding of the scroll container.

In the demo, there is 100px padding at the start and end edges of the scroll container.

scroll-padding-block: 100px;

Applicable to

It applies to scroll containers.

#CSS digger
Was this article helpful?

 
Page 1
Page 2
Page 3
Page 4
Page 5
Page 6
×

Ctrl+D