Scroll Margin

Set the scroll margin for snapping & alignment.

Widely available

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

Chrome
Edge
Firefox
Safari

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

Responsiveness

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

Target viewport sizes with breakpoint prefixes.

sm:sm-*
Small≥640px
md:sm-*
Medium≥768px
lg:sm-*
Large≥1024px
xxl:sm-*
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:sm-*

Negative Values

Use negative variants to apply negative scroll margins.

Use the -- syntax to apply negative numeric values.

Syntax:sm--*