scroll-padding

Utilities for controlling an element

Examples

Basic example

Use the scroll-pt-<number>, scroll-pr-<number>, scroll-pb-<number>, and scroll-pl-<number> utilities like scroll-pl-4 and scroll-pt-6 to set the scroll offset of an element within a snap container:

Using logical properties

Use the scroll-ps-<number> and scroll-pe-<number> utilities to set the scroll-padding-inline-start and scroll-padding-inline-end logical properties, which map to either the left or right side based on the text direction:

Use the scroll-pbs-<number> and scroll-pbe-<number> utilities to set the scroll-padding-block-start and scroll-padding-block-end logical properties, which map to either the top or bottom side based on the writing mode:

<!-- [!code classes:scroll-pbs-6] -->
<div class="snap-y scroll-pbs-6 ...">
  <!-- ... -->
</div>

Using negative values

To use a negative scroll padding value, prefix the class name with a dash to convert it to a negative value:

<!-- [!code classes:-scroll-ps-6] -->
<div class="-scroll-ps-6 snap-x ...">
  <!-- ... -->
</div>

Using a custom value

Responsive design

Customizing your theme