scroll-margin-top

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

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

Как оставить заголовок видимым под липкой шапкой при переходе по якорю — в уроке «Позиционирование элементов. Часть 2: sticky и z-index».

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

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

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

scroll-margin-top: 0

HTML и CSS примера
HTML
<div class="stage">
  <nav><a href="#target">К разделу</a> · <a href="#start">В начало</a></nav>
  <div class="scroller">
    <header>Закреплённая панель</header>
    <div id="start">Начало страницы</div>
    <div class="spacer"></div>
    <h3 id="target" class="demo-target">Нужный раздел</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-margin-top: 0;
}

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

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

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

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

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

CSS синтаксис:

CSS
scroll-margin-top: <length>;

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

<length> — длина, например 64px или 4rem. Проценты не допускаются; отрицательная длина допустима.

JavaScript синтаксис:

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

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

0.

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

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

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

Свойство задают цели прокрутки: заголовку или разделу с id. Для одинакового резерва у всех целей можно задать scroll-padding-top самому контейнеру. Если использовать оба свойства, расстояния могут складываться — не резервируйте высоту шапки дважды без необходимости.

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

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

CSS Scroll Snap — scroll-margin-top.

Наследуется

Нет.

Анимируемое

Да, по вычисленному значению: промежуточные значения рассчитываются плавно.

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

Отступ у цели прокрутки

Нажмите «К разделу»: заголовок окажется ниже липкой шапки. Замените scroll-margin-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;
}
#chapter {
    scroll-margin-top: 64px;
}