Внутренний отступ прокрутки
Классы scroll-p* задают scroll-padding — поле внутри прокручиваемой
области, которое браузер учитывает, когда прокручивает к элементу: по
якорной ссылке, через scrollIntoView или при привязке прокрутки. Берите
их на контейнер, если зазор нужен всем его элементам сразу, — например, под
закреплённой шапкой страницы.
Пример
Прокрутите обе ленты вбок. Без класса карточки привязываются вплотную к
краю ленты; с scroll-pl-4 на ленте — с полем в начале строки.
1
2
3
4
5
6
7
8
без класса
1
2
3
4
5
6
7
8
scroll-pl-4
Классы
| Класс | CSS | Значения |
|---|---|---|
scroll-p-{значение} |
scroll-padding: var(--sf-space-{значение}) |
0, 1/4, 1/3, 1/2, 1, 2, 3, 4, 5, 6, 7, 8 |
scroll-pt-{значение} |
scroll-padding-top: var(--sf-space-{значение}) |
0, 1/4, 1/3, 1/2, 1, 2, 3, 4, 5, 6, 7, 8 |
scroll-pr-{значение} |
scroll-padding-inline-end: var(--sf-space-{значение}) |
0, 1/4, 1/3, 1/2, 1, 2, 3, 4, 5, 6, 7, 8 |
scroll-pb-{значение} |
scroll-padding-bottom: var(--sf-space-{значение}) |
0, 1/4, 1/3, 1/2, 1, 2, 3, 4, 5, 6, 7, 8 |
scroll-pl-{значение} |
scroll-padding-inline-start: var(--sf-space-{значение}) |
0, 1/4, 1/3, 1/2, 1, 2, 3, 4, 5, 6, 7, 8 |
scroll-px-{значение} |
scroll-padding-inline-end: var(--sf-space-{значение}); scroll-padding-inline-start: var(--sf-space-{значение}) |
0, 1/4, 1/3, 1/2, 1, 2, 3, 4, 5, 6, 7, 8 |
scroll-py-{значение} |
scroll-padding-top: var(--sf-space-{значение}); scroll-padding-bottom: var(--sf-space-{значение}) |
0, 1/4, 1/3, 1/2, 1, 2, 3, 4, 5, 6, 7, 8 |
scroll-p-{значение} |
scroll-padding: var(--sf-{значение}) |
a0, a1, a2, a3, a4, a5, a6, a7, a8, a9, b0, b1, b2, b3, b4, b5, b6, b7, b8, b9, c0, c1, c2, c3, c4, c5, c6, c7, c8, c9, d0, d1, d2, d3, d4, d5, d6, d7, d8, d9, e0, e1, e2, e3, e4, e5, e6, e7, e8, e9, f0, f1, f2, f3, f4, f5, f6, f7, f8, f9, g0, g1, g2, g3, g4, g5, g6, g7, g8, g9, h0, h1, h2, h3, h4, h5, h6, h7, h8, h9, i0, i1, i2, i3, i4, i5, i6, i7, i8, i9 |
-scroll-p-{значение} |
scroll-padding: calc(0rem - var(--sf-{значение})) |
a0, a1, a2, a3, a4, a5, a6, a7, a8, a9, b0, b1, b2, b3, b4, b5, b6, b7, b8, b9, c0, c1, c2, c3, c4, c5, c6, c7, c8, c9, d0, d1, d2, d3, d4, d5, d6, d7, d8, d9, e0, e1, e2, e3, e4, e5, e6, e7, e8, e9, f0, f1, f2, f3, f4, f5, f6, f7, f8, f9, g0, g1, g2, g3, g4, g5, g6, g7, g8, g9, h0, h1, h2, h3, h4, h5, h6, h7, h8, h9, i0, i1, i2, i3, i4, i5, i6, i7, i8, i9 |
scroll-pt-{значение} |
scroll-padding-top: var(--sf-{значение}) |
a0, a1, a2, a3, a4, a5, a6, a7, a8, a9, b0, b1, b2, b3, b4, b5, b6, b7, b8, b9, c0, c1, c2, c3, c4, c5, c6, c7, c8, c9, d0, d1, d2, d3, d4, d5, d6, d7, d8, d9, e0, e1, e2, e3, e4, e5, e6, e7, e8, e9, f0, f1, f2, f3, f4, f5, f6, f7, f8, f9, g0, g1, g2, g3, g4, g5, g6, g7, g8, g9, h0, h1, h2, h3, h4, h5, h6, h7, h8, h9, i0, i1, i2, i3, i4, i5, i6, i7, i8, i9 |
-scroll-pt-{значение} |
scroll-padding-top: calc(0rem - var(--sf-{значение})) |
a0, a1, a2, a3, a4, a5, a6, a7, a8, a9, b0, b1, b2, b3, b4, b5, b6, b7, b8, b9, c0, c1, c2, c3, c4, c5, c6, c7, c8, c9, d0, d1, d2, d3, d4, d5, d6, d7, d8, d9, e0, e1, e2, e3, e4, e5, e6, e7, e8, e9, f0, f1, f2, f3, f4, f5, f6, f7, f8, f9, g0, g1, g2, g3, g4, g5, g6, g7, g8, g9, h0, h1, h2, h3, h4, h5, h6, h7, h8, h9, i0, i1, i2, i3, i4, i5, i6, i7, i8, i9 |
scroll-p-inline-end-{значение} |
scroll-padding-inline-end: var(--sf-{значение}) |
a0, a1, a2, a3, a4, a5, a6, a7, a8, a9, b0, b1, b2, b3, b4, b5, b6, b7, b8, b9, c0, c1, c2, c3, c4, c5, c6, c7, c8, c9, d0, d1, d2, d3, d4, d5, d6, d7, d8, d9, e0, e1, e2, e3, e4, e5, e6, e7, e8, e9, f0, f1, f2, f3, f4, f5, f6, f7, f8, f9, g0, g1, g2, g3, g4, g5, g6, g7, g8, g9, h0, h1, h2, h3, h4, h5, h6, h7, h8, h9, i0, i1, i2, i3, i4, i5, i6, i7, i8, i9 |
-scroll-p-inline-end-{значение} |
scroll-padding-inline-end: calc(0rem - var(--sf-{значение})) |
a0, a1, a2, a3, a4, a5, a6, a7, a8, a9, b0, b1, b2, b3, b4, b5, b6, b7, b8, b9, c0, c1, c2, c3, c4, c5, c6, c7, c8, c9, d0, d1, d2, d3, d4, d5, d6, d7, d8, d9, e0, e1, e2, e3, e4, e5, e6, e7, e8, e9, f0, f1, f2, f3, f4, f5, f6, f7, f8, f9, g0, g1, g2, g3, g4, g5, g6, g7, g8, g9, h0, h1, h2, h3, h4, h5, h6, h7, h8, h9, i0, i1, i2, i3, i4, i5, i6, i7, i8, i9 |
scroll-pb-{значение} |
scroll-padding-bottom: var(--sf-{значение}) |
a0, a1, a2, a3, a4, a5, a6, a7, a8, a9, b0, b1, b2, b3, b4, b5, b6, b7, b8, b9, c0, c1, c2, c3, c4, c5, c6, c7, c8, c9, d0, d1, d2, d3, d4, d5, d6, d7, d8, d9, e0, e1, e2, e3, e4, e5, e6, e7, e8, e9, f0, f1, f2, f3, f4, f5, f6, f7, f8, f9, g0, g1, g2, g3, g4, g5, g6, g7, g8, g9, h0, h1, h2, h3, h4, h5, h6, h7, h8, h9, i0, i1, i2, i3, i4, i5, i6, i7, i8, i9 |
-scroll-pb-{значение} |
scroll-padding-bottom: calc(0rem - var(--sf-{значение})) |
a0, a1, a2, a3, a4, a5, a6, a7, a8, a9, b0, b1, b2, b3, b4, b5, b6, b7, b8, b9, c0, c1, c2, c3, c4, c5, c6, c7, c8, c9, d0, d1, d2, d3, d4, d5, d6, d7, d8, d9, e0, e1, e2, e3, e4, e5, e6, e7, e8, e9, f0, f1, f2, f3, f4, f5, f6, f7, f8, f9, g0, g1, g2, g3, g4, g5, g6, g7, g8, g9, h0, h1, h2, h3, h4, h5, h6, h7, h8, h9, i0, i1, i2, i3, i4, i5, i6, i7, i8, i9 |
scroll-p-inline-start-{значение} |
scroll-padding-inline-start: var(--sf-{значение}) |
a0, a1, a2, a3, a4, a5, a6, a7, a8, a9, b0, b1, b2, b3, b4, b5, b6, b7, b8, b9, c0, c1, c2, c3, c4, c5, c6, c7, c8, c9, d0, d1, d2, d3, d4, d5, d6, d7, d8, d9, e0, e1, e2, e3, e4, e5, e6, e7, e8, e9, f0, f1, f2, f3, f4, f5, f6, f7, f8, f9, g0, g1, g2, g3, g4, g5, g6, g7, g8, g9, h0, h1, h2, h3, h4, h5, h6, h7, h8, h9, i0, i1, i2, i3, i4, i5, i6, i7, i8, i9 |
-scroll-p-inline-start-{значение} |
scroll-padding-inline-start: calc(0rem - var(--sf-{значение})) |
a0, a1, a2, a3, a4, a5, a6, a7, a8, a9, b0, b1, b2, b3, b4, b5, b6, b7, b8, b9, c0, c1, c2, c3, c4, c5, c6, c7, c8, c9, d0, d1, d2, d3, d4, d5, d6, d7, d8, d9, e0, e1, e2, e3, e4, e5, e6, e7, e8, e9, f0, f1, f2, f3, f4, f5, f6, f7, f8, f9, g0, g1, g2, g3, g4, g5, g6, g7, g8, g9, h0, h1, h2, h3, h4, h5, h6, h7, h8, h9, i0, i1, i2, i3, i4, i5, i6, i7, i8, i9 |
Условия (что это): ширина экрана — нет; состояния — нет.
Классы и переменные собраны из CSS выпуска и обновляются вместе с ним.
Переменные
Классы читают эти токены темы. Изменённый токен меняет все места, где он используется, — классы, компоненты и тему; задайте его в теме проекта, а не на отдельном элементе. Все токены — на странице Все токены.
| Переменная | Значение по умолчанию |
|---|---|
--sf-space-0 |
0 |
--sf-space-1/4 |
0.25rem; от ширины lg: var(--sf-a4) |
--sf-space-1/3 |
0.5rem; от ширины lg: var(--sf-a8) |
--sf-space-1/2 |
0.5rem; от ширины lg: 0.75rem |
--sf-space-1 |
var(--sf-b2); от ширины lg: var(--sf-b6) |
--sf-space-2 |
var(--sf-b6); от ширины lg: var(--sf-c0) |
--sf-space-3 |
var(--sf-b6); от ширины lg: var(--sf-c2) |
--sf-space-4 |
var(--sf-c2); от ширины lg: var(--sf-c6) |
--sf-space-5 |
var(--sf-c6); от ширины lg: var(--sf-d0) |
--sf-space-6 |
var(--sf-c6); от ширины lg: var(--sf-d2) |
--sf-space-7 |
var(--sf-d0); от ширины lg: var(--sf-d6) |
--sf-space-8 |
var(--sf-d2); от ширины lg: var(--sf-e0) |
--sf-a0 |
0rem |
--sf-a1 |
0.0625rem |
--sf-a2 |
0.125rem |
--sf-a3 |
0.1875rem |
--sf-a4 |
0.25rem |
--sf-a5 |
0.3125rem |
--sf-a6 |
0.375rem |
--sf-a7 |
0.4375rem |
--sf-a8 |
0.5rem |
--sf-a9 |
0.5625rem |
--sf-b0 |
0.625rem |
--sf-b1 |
0.6875rem |
--sf-b2 |
0.75rem |
--sf-b3 |
0.8125rem |
--sf-b4 |
0.875rem |
--sf-b5 |
0.9375rem |
--sf-b6 |
1rem |
--sf-b7 |
1.0625rem |
--sf-b8 |
1.125rem |
--sf-b9 |
1.1875rem |
--sf-c0 |
1.25rem |
--sf-c1 |
1.375rem |
--sf-c2 |
1.5rem |
--sf-c3 |
1.625rem |
--sf-c4 |
1.75rem |
--sf-c5 |
1.875rem |
--sf-c6 |
2rem |
--sf-c7 |
2.125rem |
--sf-c8 |
2.25rem |
--sf-c9 |
2.375rem |
--sf-d0 |
2.5rem |
--sf-d1 |
2.75rem |
--sf-d2 |
3rem |
--sf-d3 |
3.25rem |
--sf-d4 |
3.5rem |
--sf-d5 |
3.75rem |
--sf-d6 |
4rem |
--sf-d7 |
4.25rem |
--sf-d8 |
4.5rem |
--sf-d9 |
4.75rem |
--sf-e0 |
5rem |
--sf-e1 |
5.5rem |
--sf-e2 |
6rem |
--sf-e3 |
6.5rem |
--sf-e4 |
7rem |
--sf-e5 |
7.5rem |
--sf-e6 |
8rem |
--sf-e7 |
8.5rem |
--sf-e8 |
9rem |
--sf-e9 |
9.5rem |
--sf-f0 |
10rem |
--sf-f1 |
11rem |
--sf-f2 |
12rem |
--sf-f3 |
13rem |
--sf-f4 |
14rem |
--sf-f5 |
15rem |
--sf-f6 |
16rem |
--sf-f7 |
17rem |
--sf-f8 |
18rem |
--sf-f9 |
19rem |
--sf-g0 |
20rem |
--sf-g1 |
22rem |
--sf-g2 |
24rem |
--sf-g3 |
26rem |
--sf-g4 |
28rem |
--sf-g5 |
30rem |
--sf-g6 |
32rem |
--sf-g7 |
34rem |
--sf-g8 |
36rem |
--sf-g9 |
38rem |
--sf-h0 |
40rem |
--sf-h1 |
44rem |
--sf-h2 |
48rem |
--sf-h3 |
52rem |
--sf-h4 |
56rem |
--sf-h5 |
60rem |
--sf-h6 |
64rem |
--sf-h7 |
68rem |
--sf-h8 |
72rem |
--sf-h9 |
76rem |
--sf-i0 |
80rem |
--sf-i1 |
88rem |
--sf-i2 |
96rem |
--sf-i3 |
104rem |
--sf-i4 |
112rem |
--sf-i5 |
120rem |
--sf-i6 |
128rem |
--sf-i7 |
136rem |
--sf-i8 |
144rem |
--sf-i9 |
152rem |
В CSS косую черту в имени экранируют: var(--sf-space-1\/4).
Применение
Отступ на контейнере или на элементе
scroll-padding ставят на прокручиваемую область, и он действует для всех её
элементов. Внешний отступ прокрутки
ставят на отдельный элемент. Для страницы с закреплённой шапкой проще один
класс на корневом элементе:
<html class="scroll-pt-8">
Стороны и шкала
| Шаблон | Сторона |
|---|---|
scroll-p-{значение} |
все стороны |
scroll-pt-{значение}, scroll-pb-{значение} |
сверху, снизу |
scroll-py-{значение} |
сверху и снизу |
scroll-pl-{значение}, scroll-pr-{значение} |
в начале и в конце строки |
scroll-px-{значение} |
в начале и в конце строки |
Основная шкала — шаги отступов 0, 1/4, 1/3, 1/2, 1 … 8
(токены --sf-space-*, они растут на широких экранах). Расширенная шкала —
размерные токены a0 … i9 с точным значением, в том числе отрицательные
классы -scroll-p-*; стороны строки в ней названы
scroll-p-inline-start-* и scroll-p-inline-end-*, классов scroll-py-* и
scroll-px-* в ней нет.
<div class="overflow-auto snap-x snap-mandatory scroll-p-inline-start-c6">…</div>
Ограничения
scroll-pl-*иscroll-pr-*задают логические стороны (scroll-padding-inline-startи-end), а не левую и правую: при письме справа налево они меняются местами.- Поле действует только при прокрутке к элементу; на раскладку содержимого оно не влияет. Для полей внутри блока берите внутренние отступы.
- У семейства нет префиксов ширины экрана и состояния.