Scroll Padding

Set the scroll padding for snapping & alignment.

Widely available

This feature is well established and works across many devices and browser versions.

Chrome
Edge
Firefox
Safari

sp-0
scroll-padding: 0;
sp-1
scroll-padding: .25rem;
sp-2
scroll-padding: .5rem;
sp-3
scroll-padding: .75rem;
sp-4
scroll-padding: 1rem;
sp-5
scroll-padding: 1.25rem;
sp-6
scroll-padding: 1.5rem;
sp-7
scroll-padding: 1.75rem;
sp-8
scroll-padding: 2rem;
sp-9
scroll-padding: 2.25rem;
sp-10
scroll-padding: 2.5rem;
sp-11
scroll-padding: 2.75rem;
sp-12
scroll-padding: 3rem;
sp-13
scroll-padding: 3.25rem;
sp-14
scroll-padding: 3.5rem;
sp-15
scroll-padding: 3.75rem;
sp-16
scroll-padding: 4rem;
sp-17
scroll-padding: 4.25rem;
sp-18
scroll-padding: 4.5rem;
sp-19
scroll-padding: 4.75rem;
sp-20
scroll-padding: 5rem;
sp-21
scroll-padding: 5.25rem;
sp-22
scroll-padding: 5.5rem;
sp-23
scroll-padding: 5.75rem;
sp-24
scroll-padding: 6rem;
sp-25
scroll-padding: 6.25rem;
sp-26
scroll-padding: 6.5rem;
sp-27
scroll-padding: 6.75rem;
sp-28
scroll-padding: 7rem;
sp-29
scroll-padding: 7.25rem;
sp-30
scroll-padding: 7.5rem;
sp-31
scroll-padding: 7.75rem;
sp-32
scroll-padding: 8rem;
sp-33
scroll-padding: 8.25rem;
sp-34
scroll-padding: 8.5rem;
sp-35
scroll-padding: 8.75rem;
sp-36
scroll-padding: 9rem;
sp-37
scroll-padding: 9.25rem;
sp-38
scroll-padding: 9.5rem;
sp-39
scroll-padding: 9.75rem;
sp-40
scroll-padding: 10rem;
sp-41
scroll-padding: 10.25rem;
sp-42
scroll-padding: 10.5rem;
sp-43
scroll-padding: 10.75rem;
sp-44
scroll-padding: 11rem;
sp-45
scroll-padding: 11.25rem;
sp-46
scroll-padding: 11.5rem;
sp-47
scroll-padding: 11.75rem;
sp-48
scroll-padding: 12rem;
sp-49
scroll-padding: 12.25rem;
sp-50
scroll-padding: 12.5rem;
sp-51
scroll-padding: 12.75rem;
sp-52
scroll-padding: 13rem;
sp-53
scroll-padding: 13.25rem;
sp-54
scroll-padding: 13.5rem;
sp-55
scroll-padding: 13.75rem;
sp-56
scroll-padding: 14rem;
sp-57
scroll-padding: 14.25rem;
sp-58
scroll-padding: 14.5rem;
sp-59
scroll-padding: 14.75rem;
sp-60
scroll-padding: 15rem;
sp-61
scroll-padding: 15.25rem;
sp-62
scroll-padding: 15.5rem;
sp-63
scroll-padding: 15.75rem;
sp-64
scroll-padding: 16rem;
sp-65
scroll-padding: 16.25rem;
sp-66
scroll-padding: 16.5rem;
sp-67
scroll-padding: 16.75rem;
sp-68
scroll-padding: 17rem;
sp-69
scroll-padding: 17.25rem;
sp-70
scroll-padding: 17.5rem;
sp-71
scroll-padding: 17.75rem;
sp-72
scroll-padding: 18rem;
sp-73
scroll-padding: 18.25rem;
sp-74
scroll-padding: 18.5rem;
sp-75
scroll-padding: 18.75rem;
sp-76
scroll-padding: 19rem;
sp-77
scroll-padding: 19.25rem;
sp-78
scroll-padding: 19.5rem;
sp-79
scroll-padding: 19.75rem;
sp-80
scroll-padding: 20rem;
sp-81
scroll-padding: 20.25rem;
sp-82
scroll-padding: 20.5rem;
sp-83
scroll-padding: 20.75rem;
sp-84
scroll-padding: 21rem;
sp-85
scroll-padding: 21.25rem;
sp-86
scroll-padding: 21.5rem;
sp-87
scroll-padding: 21.75rem;
sp-88
scroll-padding: 22rem;
sp-89
scroll-padding: 22.25rem;
sp-90
scroll-padding: 22.5rem;
sp-91
scroll-padding: 22.75rem;
sp-92
scroll-padding: 23rem;
sp-93
scroll-padding: 23.25rem;
sp-94
scroll-padding: 23.5rem;
sp-95
scroll-padding: 23.75rem;
sp-96
scroll-padding: 24rem;
sp-97
scroll-padding: 24.25rem;
sp-98
scroll-padding: 24.5rem;
sp-99
scroll-padding: 24.75rem;
sp-100
scroll-padding: 25rem;
sp-auto
scroll-padding: auto;
sp-px
scroll-padding: 1px;

Responsiveness

Use breakpoint prefixes to target different screen sizes. Styles apply from the breakpoint & up.

Target viewport sizes with breakpoint prefixes.

sm:sp-(value)
Small≥640px
md:sp-(value)
Medium≥768px
lg:sp-(value)
Large≥1024px
xxl:sp-(value)
Extra Large≥1536px

Hover State

Apply styles conditionally on hover using the h: prefix.

Add the h: prefix to apply styles only when the user hovers over the element.

Syntax:h:sp-(value)

Negative Values

Use negative variants to apply negative scroll padding.

Use the -- syntax to apply negative numeric values.

Syntax:sp--(value)