scroll-padding

Задаёт отступ от краёв контейнера прокрутки, внутри которых браузер старается не размещать целевые элементы.

При переходе по якорной ссылке браузер не домотает 100 пикселей до элемента, от верхнего края окна браузера до ссылки будет отступ.

        
          
          html {  scroll-padding-top: 100px;}
          html {
  scroll-padding-top: 100px;
}

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

scroll-padding задаёт отступы таким же образом как и padding и имеет такой же набор CSS-свойств для каждой из сторон:

Физические:

• scroll-padding-top;
• scroll-padding-right;
• scroll-padding-bottom;
• scroll-padding-left.

Логические:

• scroll-padding-block-start;
• scroll-padding-inline-start;
• scroll-padding-block-end;
• scroll-padding-inline-end.

Представьте блок с полосой прокрутки. У такого блока видна только часть содержимого, определяемая его шириной и высотой за вычетом полос прокрутки. Эта видимая область называется скроллпорт (scrollport), по аналогии с вьюпорт (viewport) — видимой областью всего экрана.

Переход по якорной ссылке (как и scrollIntoView) говорит браузеру прокрутить контейнер так, чтобы целевой элемент попал в скроллпорт. По умолчанию, браузер домотает до начала блока, тем самым верхняя грань блока будет совпадать со скроллпортом.

Тут можно столкнуться с визуальными проблемами:

• Целевые элементы прилипают к верху экрана, им не хватает отступа.
• Фиксированные к верху экрана элементы перекрывают целевой элемент.

scroll-padding решает эти проблемы, никак не изменяя макет страницы. Его значения сокращают скроллпорт, создавая оптимальную для показа контента область. В ней браузер старается размещать целевые блоки. Высота этой области будет использоваться при выполнении операций постраничной прокрутки (например, при нажатии PgDown).