Каталог
Веб-разработка с нуля: четыре курса по порядку.
HTML, затем CSS, JavaScript и SQL. Каждый курс говорит, что нужно знать до него и что вы будете уметь после.
Загружаем курсы…
Каталог
HTML, затем CSS, JavaScript и SQL. Каждый курс говорит, что нужно знать до него и что вы будете уметь после.
Загружаем курсы…
Урок 43 из 53 · 13 мин
scroll-behavior, scroll-snap-type, scroll-snap-align, scroll-margin, scroll-padding и overscroll-behavior.
Жму «Контакты» — страница прыгает, а заголовок уезжает под шапку.
Три строки CSS: плавная прокрутка, отступ под шапку — и карусель с примагничиванием в придачу.
scroll-behaviorhtml { scroll-behavior: smooth; } — переходы по якорям плавные.scroll-margin-topscroll-margin-top: 80px у раздела — он остановится ниже липкой шапки. Есть и общее scroll-margin.scroll-paddingscroll-snap-typescroll-snap-type: x mandatory у контейнера — прокрутка останавливается на элементах.<style>
.row { display: flex; gap: 8px; overflow-x: auto; scroll-snap-type: x mandatory; } .row > div { flex: 0 0 70%; scroll-snap-align: start; background: #fdf6ec; padding: 16px; }
</style>
<div class="row"><div>Стикеры</div><div>Тирамису</div><div>Эклер</div></div>scroll-snap-alignstart, center, end — у элементов карусели.overscroll-behavioroverscroll-behavior: contain — прокрутка внутри окна не уводит страницу.Карусель — это overflow-x + scroll-snap. JavaScript не нужен.
Сделай .desserts каруселью: scroll-snap-type: x mandatory, а .desserts article — scroll-snap-align: start.
Включи html { scroll-behavior: smooth; } и дай section scroll-margin-top: 80px.
Выберите один ответ.
Что нужно контейнеру карусели, чтобы прокрутка останавливалась на карточках?
Выберите один ответ.
Как сделать, чтобы раздел при переходе по якорю не прятался под липкой шапкой?
Проверяем состояние обучения…