scroll-margin
Дополнительное место вокруг элемента, когда страница прокручивается к нему, — чтобы он не оказался под фиксированной шапкой.
Синтаксис
scroll-margin-top: value;Значения
| Параметр | Тип | Описание |
|---|---|---|
| length | length | Размер места: `scroll-margin-top: 80px`. |
| scroll-padding | property | То же, но задаётся один раз прокручиваемому контейнеру. |
Примеры
Заголовок останавливается ниже липкой шапки:
<div style="height: 140px; overflow: auto; border: 1px solid gray;">
<div style="position: sticky; top: 0; background: gold; padding: 6px;">Sticky header — <a href="#part">Go to Part 2</a></div>
<p style="height: 200px;">Part 1…</p>
<h4 id="part" style="scroll-margin-top: 40px;">Part 2 is not hidden under the header</h4>
<p style="height: 200px;">…</p>
</div>Примечания
Если у сайта фиксированная шапка, scroll-padding-top у html высотой с шапку исправляет сразу все якорные ссылки.
См. также
- scroll-behavior — Происходят ли переходы к якорям и прокрутка из кода мгновенно или плавно.
- :target — Срабатывает у элемента, чей `id` совпадает с фрагментом адреса после `#`.
- position — Как позиционируется элемент: в обычном потоке или по смещениям.
Вопросы и ответы по теме
В учебнике
- Прокрутка — Плавная прокрутка scroll-behavior, отступ для якоря под липкой шапкой scroll-margin-top, карусель на scroll-snap и overscroll-behavior.