scroll-padding-top: полезная область контейнера прокрутки
scroll-padding-top задаёт верхний внутренний отступ области прокрутки, учитываемый при размещении целевых элементов.
Назначение
scroll-padding-top задаёт верхний внутренний отступ области прокрутки, учитываемый при размещении целевых элементов.
Как это работает
Свойство назначают контейнеру прокрутки, а не каждому заголовку. Это отличается от scroll-margin-top у цели. Оно не добавляет обычный padding к потоку документа.
Пример
<style>
.reader{height:180px;overflow:auto;scroll-padding-top:36px;border:1px solid;padding:12px}.gap{height:200px}
</style>
<div class="reader" tabindex="0" aria-label="Учебные разделы"><a href="#chapter">Открыть главу</a><div class="gap"></div><h2 id="chapter">Глава</h2><div class="gap"></div></div>Что должно получиться
Переход выполняется внутри reader с учётом его полезной верхней области. Содержимое не получает постоянного дополнительного отступа как при padding-top.
Граница применения и частая ошибка
Если прокручивается вложенный блок, правило на html может не повлиять на него. Сначала определите, какой элемент действительно является прокручиваемым контейнером.
Самостоятельная проверка
Сравните прокрутку всей страницы и внутреннего контейнера. Установите отступ на правильном элементе и проверьте переход к нескольким целям внутри него.
HTML и CSS можно изменить в песочнице ниже. Она изолирована: JavaScript, внешние ресурсы и отправка форм отключены. Для проверки сетевых запросов, отправки данных или функций браузера используйте отдельную локальную страницу.