scroll-margin

Свойство scroll-margin добавляет отступ между краем области прокрутки (контейнера со скроллом) и элементом, к которому происходит прокрутка внутри этого контейнера. Такой элемент называют «прокручиваемым» или «элементом назначения». Применяется, когда к элементу прокручивают страницу с помощью якоря (#anchor) или JavaScript (scrollIntoView()).

        
          
          <div class="container">  <a href="#target">Перейти к секции</a>  <h2 id="target">Заголовок секции</h2></div>
          <div class="container">
  <a href="#target">Перейти к секции</a>
  <h2 id="target">Заголовок секции</h2>
</div>

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

        
          
          h2 {  scroll-margin-bottom: 2rem;}
          h2 {
  scroll-margin-bottom: 2rem;
}

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

Свойство scroll-margin работает аналогично обычному margin, только применяется при прокрутке. Можно задать отступы сторонам по отдельности:

        
          
          .element {  scroll-margin-top: 2rem;  scroll-margin-bottom: 1rem;  scroll-margin-left: 0.5rem;  scroll-margin-right: 0.5rem;}
          .element {
  scroll-margin-top: 2rem;
  scroll-margin-bottom: 1rem;
  scroll-margin-left: 0.5rem;
  scroll-margin-right: 0.5rem;
}

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

Шорткат для свойства:

        
          
          .element {  /* Отступ со всех сторон */  scroll-margin: 1rem;}
          .element {
  /* Отступ со всех сторон */
  scroll-margin: 1rem;
}

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

Также доступны логические свойства:

        
          
          .element {  scroll-margin-block-start: 2rem;  scroll-margin-inline-end: 1rem;}
          .element {
  scroll-margin-block-start: 2rem;
  scroll-margin-inline-end: 1rem;
}

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

Когда вы скроллите к элементу — например, нажимаете ссылку <a href="#target"> или вызываете element.scrollIntoView() — браузер старается разместить этот элемент у одной из границ области просмотра. Это может быть верхний, нижний или другой край видимой части окна браузера. Иногда нужно, чтобы элемент не прижимался вплотную к этому краю. Вот тут и нужен scroll-margin.

scroll-margin часто используют при фиксированной шапке сайта: элемент, по направлению к которому прокручиваем страницу, может оказаться скрытым под ней. Это можно предотвратить, если использовать scroll-margin-top или scroll-margin-block-start.

💡 scroll-margin не влияет на визуальное расположение элементов — только на прокрутку.
💡 scroll-margin применяется только к элементу, который является целью прокрутки, а не к его родителю.
💡 Хорошо работает вместе со scroll-behavior: smooth — так пользователь чётко видит, как элемент «остановился» не вплотную к краю интерфейса.