scroll-padding-top

Определение и применение

Свойство scroll-padding-top задаёт верхний отступ оптимальной видимой области прокручиваемого контейнера. Оно помогает показывать заголовки по ссылкам-якорям так, чтобы липкая шапка не закрывала начало раздела.

Где задать отступ при прокрутке: у цели или у прокручиваемой области — в уроке «Позиционирование элементов. Часть 2: sticky и z-index».

Попробуйте значения scroll-padding-top

Выберите отступ и нажмите «К разделу». Сравните положение заголовка относительно закреплённой панели. «В начало» позволяет повторить прокрутку.

Значение свойства

scroll-padding-top: 0

HTML и CSS примера
HTML
<div class="stage">
  <nav><a href="#target">К разделу</a> · <a href="#start">В начало</a></nav>
  <div class="scroller demo-target">
    <header>Закреплённая панель</header>
    <div id="start">Начало страницы</div>
    <div class="spacer"></div>
    <h3 id="target" class="">Нужный раздел</h3>
    <p>Заголовок должен быть виден под панелью.</p>
    <div class="spacer"></div>
  </div>
</div>
CSS
* {
  box-sizing: border-box;
}
.stage {
  width: 100%;
  max-width: 340px;
  padding: 16px;
  background: white;
  color: #172c3d;
  font: 16px/1.5 system-ui;
}
nav {
  margin-bottom: 12px;
  font-size: 14px;
}
a {
  color: #174f82;
}
.scroller {
  height: 190px;
  overflow-y: auto;
  border: 1px solid #52697d;
}
header {
  position: sticky;
  top: 0;
  height: 40px;
  background: #245a85;
  color: white;
  padding: 8px;
  font-size: 13px;
}
.spacer {
  height: 190px;
}
h3,
p {
  margin: 0;
  padding: 4px;
}
.demo-target {
  scroll-padding-top: 0;
}

Поддержка браузерами

Спецификация: CSS scroll-snap

Поддерживается во всех основных браузерах с 2021 года.

Показать браузеры
Совместимостьcss.properties.scroll-padding-top
ВозможностьКомпьютерыМобильные
ChromeEdgeFirefoxOperaSafariChrome AndroidFirefox for AndroidOpera AndroidSafari on iOSSamsung BrowserWebView AndroidWebView on iOS
scroll-padding-top✓69✓79✓68✓56✓14.1✓69✓68✓48✓14.5✓10.0✓69✓14.5
auto✓78✓79✓68✓65✓15✓78✓68✓56✓15✓12.0✓78✓15

поддерживаетсяс ограниченияминет поддержкинет данных≤31 — не позднее версии 31

CSS синтаксис:

CSS
scroll-padding-top: auto | <length-percentage [0,∞]>;

/* Глобальные значения */
scroll-padding-top: initial | inherit | unset | revert | revert-layer;

| разделяет варианты, <length-percentage [0,∞]> — неотрицательная длина или процент от высоты области прокрутки.

JavaScript синтаксис:

JavaScript
element.style.scrollPaddingTop = "64px";

Начальное значение свойства

auto.

Значения свойства

Значения scroll-padding-top
Значение Описание
auto Браузер выбирает отступ; обычно это ноль, но может учитывать особенности интерфейса. Начальное значение.
<length-percentage> Размер исключённой верхней части области просмотра контейнера. Это не внутренний отступ содержимого и не способ сдвинуть весь документ.
initial Устанавливает начальное значение свойства.
inherit Наследует вычисленное значение свойства у родительского элемента.
unset Для ненаследуемого свойства scroll-padding-top устанавливает его начальное значение свойства.
revert Отменяет заданное в коде значение свойства для этого элемента: применяются пользовательские или стандартные стили браузера. Если они не задают значение, свойство наследуется или получает начальное значение по обычным правилам. Не возвращает значение из предыдущей строки CSS.
revert-layer Сбрасывает значение свойства для текущего слоя каскада @layer. Применяется значение из другого слоя по правилам каскада; если подходящего значения нет, возможен откат к стилям пользователя или браузера.

Куда задавать свойство

Свойство задают элементу, который действительно прокручивается, например блоку с overflow: auto. Для прокрутки окна задавайте его html, а не произвольной обёртке и не только body. Если резерв нужен лишь одному разделу, удобнее scroll-margin-top у цели.

Эти настройки участвуют в прокрутке к фрагменту и scrollIntoView(), а также связаны с областью привязки Scroll Snap (механизма автоматического выравнивания содержимого по заданным позициям при прокрутке). Они не ограничивают обычную ручную прокрутку. Около конца документа браузеру может не хватить свободного пространства для точного выравнивания: отступ не создаёт дополнительную высоту страницы.

Спецификация

CSS Scroll Snap — scroll-padding-top.

Наследуется

Нет.

Анимируемое

Да, по вычисленному значению: промежуточные значения рассчитываются плавно. Переход с auto — дискретный.

Примеры, попробуйте сами

Резерв под шапку контейнера

Нажмите «К разделу»: заголовок окажется ниже липкой шапки. Замените scroll-padding-top на 0 и повторите переход после возврата в начало.

base.css
CSS
body {
    margin: 1rem;
    font:
        16px/1.5 system-ui,
        sans-serif;
    color: #243342;
    background: #fff;
}
* {
    box-sizing: border-box;
}
.scroller {
    border: 2px solid #475569;
}
nav {
    padding: 12px;
    background: #e2e8f0;
}
section {
    min-height: 260px;
    padding: 12px;
}
h2 {
    margin: 0;
}
a {
    color: #1d4ed8;
}
index.html
HTML
<!doctype html>
<html lang="ru">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Резерв под шапку контейнера</title>
  </head>
  <body>
    <div class="scroller" tabindex="0" aria-label="Заметки с прокруткой">
      <nav><a href="#start">В начало</a> · <a href="#chapter">К разделу</a></nav>
      <section id="start">
        <h2>Начало</h2>
        <p>Первые записи о прогулке.</p>
      </section>
      <section id="chapter">
        <h2>У озера</h2>
        <p>Тони остановился у воды.</p>
      </section>
      <section>
        <h2>Обратный путь</h2>
        <p>Запас места после цели позволяет выровнять заголовок.</p>
      </section>
    </div>
  </body>
</html>
style.css
CSS
.scroller {
    height: 220px;
    overflow: auto;
}
nav {
    position: sticky;
    top: 0;
}
.scroller {
    scroll-padding-top: 64px;
}