scroll-snap-type и scroll-snap-align
Создавайте прокрутку каруселей и постраничную навигацию с помощью свойств CSS для привязки прокрутки.
«scroll-snap-type и scroll-snap-align» — бесплатный урок CSS Academy на CoddyKit. Это урок 3 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения CSS Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс CSS Academy содержит 4 уроков всего.
Что такое CSS Scroll Snap?
CSS Scroll Snap позволяет прокручиваемым контейнерам после прокрутки «прилипать» к определённым позициям, создавая управляемое перелистывание и поведение каруселей без JavaScript.
scroll-snap-type у контейнера
Включите привязку у прокручиваемого контейнера:
<div class="carousel">
<div class="item">1</div><div class="item">2</div><div class="item">3</div>
</div>Значения scroll-snap-type
Свойство состоит из двух частей:
- Ось:
x,yилиboth - Строгость:
mandatory(привязка выполняется всегда) илиproximity(привязка выполняется, когда прокрутка близка к точке привязки)
<div class="paged">Paged container</div>
<div class="freeform">Freeform container</div>scroll-snap-align у элементов
Определите, к какой позиции каждого дочернего элемента выполнять привязку внутри контейнера:
<div class="carousel-demo">
<div class="carousel-item">1</div><div class="carousel-item">2</div>
</div>Привязка полноэкранных страниц
Макет полноэкранных секций с вертикальным перелистыванием:
<div class="sections">
<div class="section">Section 1</div><div class="section">Section 2</div>
</div>Привязка горизонтальной карусели
Горизонтальная карусель карточек с привязкой:
<div class="carousel">
<div class="card">Card 1</div><div class="card">Card 2</div><div class="card">Card 3</div>
</div>scroll-snap-stop
scroll-snap-stop: always не позволяет быстрой прокрутке пропускать точки привязки. Пользователь не может пролистать больше одного элемента за один жест прокрутки.
<div class="slider">
<div class="slide">1</div><div class="slide">2</div>
</div>scroll-snap-margin и scroll-padding
Сместите позицию привязки у элементов (scroll-margin) или у контейнера (scroll-padding):
<div class="carousel">Carousel container</div>overscroll-behavior
overscroll-behavior: contain предотвращает цепную прокрутку: когда контейнер достигает границы прокрутки, страница также не прокручивается:
<div class="modal-body">Line 1<br>Line 2<br>Line 3<br>Line 4<br>Line 5<br>Line 6</div>Особенности доступности
Карусели с привязкой по-прежнему должны поддерживать навигацию с клавиатуры. Клавиши со стрелками должны перемещать между точками привязки. Добавьте роли и подписи карусели ARIA. Программная прокрутка через JavaScript должна учитывать те же точки привязки.
Карусели на CSS и JavaScript
CSS Scroll Snap покрывает большинство базовых потребностей карусели без JavaScript: привязка к позициям, скрытие полосы прокрутки и выравнивание с помощью отступов. Используйте библиотеку JS, если нужны индикаторы-точки, кнопки перехода назад/вперёд с анимированными переходами или сложное управление доступностью.
Быстрая проверка
Какое значение scroll-snap-type гарантирует, что контейнер всегда остановится точно в точке привязки, а не между точками?
Итоги
CSS Scroll Snap создаёт поведение перелистывания и каруселей. Задайте scroll-snap-type: x mandatory у контейнера и scroll-snap-align: start у элементов. Используйте scroll-snap-stop: always, чтобы предотвратить пропуск элементов. Объедините это свойство с overscroll-behavior: contain, чтобы предотвратить цепную прокрутку. Для аккуратного оформления скройте полосы прокрутки с помощью scrollbar-width: none.
Часто задаваемые вопросы
Урок «scroll-snap-type и scroll-snap-align» бесплатный?
Да — полный текст урока «scroll-snap-type и scroll-snap-align» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс CSS Academy, подпишись на CoddyKit PRO. Курс CSS Academy содержит 4 уроков всего.
Чему я научусь в уроке «scroll-snap-type и scroll-snap-align»?
Создавайте прокрутку каруселей и постраничную навигацию с помощью свойств CSS для привязки прокрутки. Ты практикуешь CSS Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.
Нужен ли мне опыт, чтобы начать CSS Academy?
Предыдущий опыт не требуется. CSS Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 3 из 4.
Сколько времени занимает урок «scroll-snap-type и scroll-snap-align»?
Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.
Можно ли писать и запускать код в этом уроке CSS Academy?
Да. Каждый урок CSS Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.
Все уроки этого курса
- overflow: hidden, scroll, auto, clip
- scroll-behavior: smooth
- scroll-snap-type и scroll-snap-align
- Стилизация полосы прокрутки с помощью ::-webkit-scrollbar