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