scroll-padding

Как отступы, только для прокрутки: свойство позволяет остановить прокрутку на определённом расстоянии от края контейнера

Время чтения: меньше 5 мин

Кратко

Секция статьи "Кратко"

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

Пример

Секция статьи "Пример"

При переходе по якорной ссылке браузер не домотает 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-start.

Как понять

Секция статьи "Как понять"

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

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

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

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

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