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-101
scroll-margin: 25.25rem;
sm-102
scroll-margin: 25.5rem;
sm-103
scroll-margin: 25.75rem;
sm-104
scroll-margin: 26rem;
sm-105
scroll-margin: 26.25rem;
sm-106
scroll-margin: 26.5rem;
sm-107
scroll-margin: 26.75rem;
sm-108
scroll-margin: 27rem;
sm-109
scroll-margin: 27.25rem;
sm-110
scroll-margin: 27.5rem;
sm-111
scroll-margin: 27.75rem;
sm-112
scroll-margin: 28rem;
sm-113
scroll-margin: 28.25rem;
sm-114
scroll-margin: 28.5rem;
sm-115
scroll-margin: 28.75rem;
sm-116
scroll-margin: 29rem;
sm-117
scroll-margin: 29.25rem;
sm-118
scroll-margin: 29.5rem;
sm-119
scroll-margin: 29.75rem;
sm-120
scroll-margin: 30rem;
sm-121
scroll-margin: 30.25rem;
sm-122
scroll-margin: 30.5rem;
sm-123
scroll-margin: 30.75rem;
sm-124
scroll-margin: 31rem;
sm-125
scroll-margin: 31.25rem;
sm-126
scroll-margin: 31.5rem;
sm-127
scroll-margin: 31.75rem;
sm-128
scroll-margin: 32rem;
sm-129
scroll-margin: 32.25rem;
sm-130
scroll-margin: 32.5rem;
sm-131
scroll-margin: 32.75rem;
sm-132
scroll-margin: 33rem;
sm-133
scroll-margin: 33.25rem;
sm-134
scroll-margin: 33.5rem;
sm-135
scroll-margin: 33.75rem;
sm-136
scroll-margin: 34rem;
sm-137
scroll-margin: 34.25rem;
sm-138
scroll-margin: 34.5rem;
sm-139
scroll-margin: 34.75rem;
sm-140
scroll-margin: 35rem;
sm-141
scroll-margin: 35.25rem;
sm-142
scroll-margin: 35.5rem;
sm-143
scroll-margin: 35.75rem;
sm-144
scroll-margin: 36rem;
sm-145
scroll-margin: 36.25rem;
sm-146
scroll-margin: 36.5rem;
sm-147
scroll-margin: 36.75rem;
sm-148
scroll-margin: 37rem;
sm-149
scroll-margin: 37.25rem;
sm-150
scroll-margin: 37.5rem;
sm-151
scroll-margin: 37.75rem;
sm-152
scroll-margin: 38rem;
sm-153
scroll-margin: 38.25rem;
sm-154
scroll-margin: 38.5rem;
sm-155
scroll-margin: 38.75rem;
sm-156
scroll-margin: 39rem;
sm-157
scroll-margin: 39.25rem;
sm-158
scroll-margin: 39.5rem;
sm-159
scroll-margin: 39.75rem;
sm-160
scroll-margin: 40rem;
sm-161
scroll-margin: 40.25rem;
sm-162
scroll-margin: 40.5rem;
sm-163
scroll-margin: 40.75rem;
sm-164
scroll-margin: 41rem;
sm-165
scroll-margin: 41.25rem;
sm-166
scroll-margin: 41.5rem;
sm-167
scroll-margin: 41.75rem;
sm-168
scroll-margin: 42rem;
sm-169
scroll-margin: 42.25rem;
sm-170
scroll-margin: 42.5rem;
sm-171
scroll-margin: 42.75rem;
sm-172
scroll-margin: 43rem;
sm-173
scroll-margin: 43.25rem;
sm-174
scroll-margin: 43.5rem;
sm-175
scroll-margin: 43.75rem;
sm-176
scroll-margin: 44rem;
sm-177
scroll-margin: 44.25rem;
sm-178
scroll-margin: 44.5rem;
sm-179
scroll-margin: 44.75rem;
sm-180
scroll-margin: 45rem;
sm-181
scroll-margin: 45.25rem;
sm-182
scroll-margin: 45.5rem;
sm-183
scroll-margin: 45.75rem;
sm-184
scroll-margin: 46rem;
sm-185
scroll-margin: 46.25rem;
sm-186
scroll-margin: 46.5rem;
sm-187
scroll-margin: 46.75rem;
sm-188
scroll-margin: 47rem;
sm-189
scroll-margin: 47.25rem;
sm-190
scroll-margin: 47.5rem;
sm-191
scroll-margin: 47.75rem;
sm-192
scroll-margin: 48rem;
sm-193
scroll-margin: 48.25rem;
sm-194
scroll-margin: 48.5rem;
sm-195
scroll-margin: 48.75rem;
sm-196
scroll-margin: 49rem;
sm-197
scroll-margin: 49.25rem;
sm-198
scroll-margin: 49.5rem;
sm-199
scroll-margin: 49.75rem;
sm-200
scroll-margin: 50rem;
sm-201
scroll-margin: 50.25rem;
sm-202
scroll-margin: 50.5rem;
sm-203
scroll-margin: 50.75rem;
sm-204
scroll-margin: 51rem;
sm-205
scroll-margin: 51.25rem;
sm-206
scroll-margin: 51.5rem;
sm-207
scroll-margin: 51.75rem;
sm-208
scroll-margin: 52rem;
sm-209
scroll-margin: 52.25rem;
sm-210
scroll-margin: 52.5rem;
sm-211
scroll-margin: 52.75rem;
sm-212
scroll-margin: 53rem;
sm-213
scroll-margin: 53.25rem;
sm-214
scroll-margin: 53.5rem;
sm-215
scroll-margin: 53.75rem;
sm-216
scroll-margin: 54rem;
sm-217
scroll-margin: 54.25rem;
sm-218
scroll-margin: 54.5rem;
sm-219
scroll-margin: 54.75rem;
sm-220
scroll-margin: 55rem;
sm-221
scroll-margin: 55.25rem;
sm-222
scroll-margin: 55.5rem;
sm-223
scroll-margin: 55.75rem;
sm-224
scroll-margin: 56rem;
sm-225
scroll-margin: 56.25rem;
sm-226
scroll-margin: 56.5rem;
sm-227
scroll-margin: 56.75rem;
sm-228
scroll-margin: 57rem;
sm-229
scroll-margin: 57.25rem;
sm-230
scroll-margin: 57.5rem;
sm-231
scroll-margin: 57.75rem;
sm-232
scroll-margin: 58rem;
sm-233
scroll-margin: 58.25rem;
sm-234
scroll-margin: 58.5rem;
sm-235
scroll-margin: 58.75rem;
sm-236
scroll-margin: 59rem;
sm-237
scroll-margin: 59.25rem;
sm-238
scroll-margin: 59.5rem;
sm-239
scroll-margin: 59.75rem;
sm-240
scroll-margin: 60rem;
sm-241
scroll-margin: 60.25rem;
sm-242
scroll-margin: 60.5rem;
sm-243
scroll-margin: 60.75rem;
sm-244
scroll-margin: 61rem;
sm-245
scroll-margin: 61.25rem;
sm-246
scroll-margin: 61.5rem;
sm-247
scroll-margin: 61.75rem;
sm-248
scroll-margin: 62rem;
sm-249
scroll-margin: 62.25rem;
sm-250
scroll-margin: 62.5rem;
sm-251
scroll-margin: 62.75rem;
sm-252
scroll-margin: 63rem;
sm-253
scroll-margin: 63.25rem;
sm-254
scroll-margin: 63.5rem;
sm-255
scroll-margin: 63.75rem;
sm-256
scroll-margin: 64rem;
sm-257
scroll-margin: 64.25rem;
sm-258
scroll-margin: 64.5rem;
sm-259
scroll-margin: 64.75rem;
sm-260
scroll-margin: 65rem;
sm-261
scroll-margin: 65.25rem;
sm-262
scroll-margin: 65.5rem;
sm-263
scroll-margin: 65.75rem;
sm-264
scroll-margin: 66rem;
sm-265
scroll-margin: 66.25rem;
sm-266
scroll-margin: 66.5rem;
sm-267
scroll-margin: 66.75rem;
sm-268
scroll-margin: 67rem;
sm-269
scroll-margin: 67.25rem;
sm-270
scroll-margin: 67.5rem;
sm-271
scroll-margin: 67.75rem;
sm-272
scroll-margin: 68rem;
sm-273
scroll-margin: 68.25rem;
sm-274
scroll-margin: 68.5rem;
sm-275
scroll-margin: 68.75rem;
sm-276
scroll-margin: 69rem;
sm-277
scroll-margin: 69.25rem;
sm-278
scroll-margin: 69.5rem;
sm-279
scroll-margin: 69.75rem;
sm-280
scroll-margin: 70rem;
sm-281
scroll-margin: 70.25rem;
sm-282
scroll-margin: 70.5rem;
sm-283
scroll-margin: 70.75rem;
sm-284
scroll-margin: 71rem;
sm-285
scroll-margin: 71.25rem;
sm-286
scroll-margin: 71.5rem;
sm-287
scroll-margin: 71.75rem;
sm-288
scroll-margin: 72rem;
sm-289
scroll-margin: 72.25rem;
sm-290
scroll-margin: 72.5rem;
sm-291
scroll-margin: 72.75rem;
sm-292
scroll-margin: 73rem;
sm-293
scroll-margin: 73.25rem;
sm-294
scroll-margin: 73.5rem;
sm-295
scroll-margin: 73.75rem;
sm-296
scroll-margin: 74rem;
sm-297
scroll-margin: 74.25rem;
sm-298
scroll-margin: 74.5rem;
sm-299
scroll-margin: 74.75rem;
sm-300
scroll-margin: 75rem;
sm-301
scroll-margin: 75.25rem;
sm-302
scroll-margin: 75.5rem;
sm-303
scroll-margin: 75.75rem;
sm-304
scroll-margin: 76rem;
sm-305
scroll-margin: 76.25rem;
sm-306
scroll-margin: 76.5rem;
sm-307
scroll-margin: 76.75rem;
sm-308
scroll-margin: 77rem;
sm-309
scroll-margin: 77.25rem;
sm-310
scroll-margin: 77.5rem;
sm-311
scroll-margin: 77.75rem;
sm-312
scroll-margin: 78rem;
sm-313
scroll-margin: 78.25rem;
sm-314
scroll-margin: 78.5rem;
sm-315
scroll-margin: 78.75rem;
sm-316
scroll-margin: 79rem;
sm-317
scroll-margin: 79.25rem;
sm-318
scroll-margin: 79.5rem;
sm-319
scroll-margin: 79.75rem;
sm-320
scroll-margin: 80rem;
sm-321
scroll-margin: 80.25rem;
sm-322
scroll-margin: 80.5rem;
sm-323
scroll-margin: 80.75rem;
sm-324
scroll-margin: 81rem;
sm-325
scroll-margin: 81.25rem;
sm-326
scroll-margin: 81.5rem;
sm-327
scroll-margin: 81.75rem;
sm-328
scroll-margin: 82rem;
sm-329
scroll-margin: 82.25rem;
sm-330
scroll-margin: 82.5rem;
sm-331
scroll-margin: 82.75rem;
sm-332
scroll-margin: 83rem;
sm-333
scroll-margin: 83.25rem;
sm-334
scroll-margin: 83.5rem;
sm-335
scroll-margin: 83.75rem;
sm-336
scroll-margin: 84rem;
sm-337
scroll-margin: 84.25rem;
sm-338
scroll-margin: 84.5rem;
sm-339
scroll-margin: 84.75rem;
sm-340
scroll-margin: 85rem;
sm-341
scroll-margin: 85.25rem;
sm-342
scroll-margin: 85.5rem;
sm-343
scroll-margin: 85.75rem;
sm-344
scroll-margin: 86rem;
sm-345
scroll-margin: 86.25rem;
sm-346
scroll-margin: 86.5rem;
sm-347
scroll-margin: 86.75rem;
sm-348
scroll-margin: 87rem;
sm-349
scroll-margin: 87.25rem;
sm-350
scroll-margin: 87.5rem;
sm-351
scroll-margin: 87.75rem;
sm-352
scroll-margin: 88rem;
sm-353
scroll-margin: 88.25rem;
sm-354
scroll-margin: 88.5rem;
sm-355
scroll-margin: 88.75rem;
sm-356
scroll-margin: 89rem;
sm-357
scroll-margin: 89.25rem;
sm-358
scroll-margin: 89.5rem;
sm-359
scroll-margin: 89.75rem;
sm-360
scroll-margin: 90rem;
sm-361
scroll-margin: 90.25rem;
sm-362
scroll-margin: 90.5rem;
sm-363
scroll-margin: 90.75rem;
sm-364
scroll-margin: 91rem;
sm-365
scroll-margin: 91.25rem;
sm-366
scroll-margin: 91.5rem;
sm-367
scroll-margin: 91.75rem;
sm-368
scroll-margin: 92rem;
sm-369
scroll-margin: 92.25rem;
sm-370
scroll-margin: 92.5rem;
sm-371
scroll-margin: 92.75rem;
sm-372
scroll-margin: 93rem;
sm-373
scroll-margin: 93.25rem;
sm-374
scroll-margin: 93.5rem;
sm-375
scroll-margin: 93.75rem;
sm-376
scroll-margin: 94rem;
sm-377
scroll-margin: 94.25rem;
sm-378
scroll-margin: 94.5rem;
sm-379
scroll-margin: 94.75rem;
sm-380
scroll-margin: 95rem;
sm-381
scroll-margin: 95.25rem;
sm-382
scroll-margin: 95.5rem;
sm-383
scroll-margin: 95.75rem;
sm-384
scroll-margin: 96rem;
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-(value)
Small≥640px
@md:sm-(value)
Medium≥768px
@lg:sm-(value)
Large≥1024px
@xxl:sm-(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:sm-(value)

Negative Values

Use negative variants to apply negative scroll margins.

Use the -- syntax to apply negative numeric values.

Syntax:sm--(value)