CSS scroll-padding — мертва зона біля краю прокрутки

CSS властивість scroll-padding задає внутрішні відступи області прокрутки — «мертву зону» біля її країв.

правити

Загальний опис

Робить те саме, що scroll-margin, але з іншого боку: scroll-margin задається елементу, до якого прокручують, а scroll-padding — контейнеру, у якому прокручують.

Зручність у тому, що задати його треба один раз на html, а не кожному заголовку окремо.

правити

Порада

scroll-padding-top на html — найкоротший спосіб урахувати липку шапку для всіх якорів сайту одразу.

автор: NagarD правити

+ додати пораду чи нотатку

Синтаксис

scroll-padding: auto | <length>{1,4};

Властивість scroll-padding може отримувати 2 значень:

auto

Відступ визначає браузер.

автор: NagarD

правити

length

Відступ від краю області прокрутки (1–4 значення).

автор: NagarD

правити

Переглядачі

Стаціонарні переглядачі Мобільні переглядачі

Підтримка: стаціонарні переглядачі

Переглядач
scroll-padding	69+	68+	14.1+	56+	79+	-

Підтримка: мобільні переглядачі

Переглядач
scroll-padding	69+	yes	yes	14.5+

Приклади

+ запропонувати свій приклад у пісочниці

<a href="#one">До розділу</a>
<div style="height: 120vh"></div>
<h2 id="one">Розділ</h2>

html {
    /* висота липкої шапки + запас */
    scroll-padding-top: 80px;
}