Scroll Snap

Тренажер по CSS для пользователей с начальным уровнем подготовки.

Эта серия упражнений посвящена свойству CSS Scroll Snap. Вы попрактикуетесь в создании прокручиваемых контейнеров, содержимое которых \"прилипает\" к определенным точкам при завершении прокрутки пользователем. Задания охватывают как вертикальную, так и горизонтальную прокрутку, различные типы выравнивания и уровни строгости прилипания. Вам будет предоставлен готовый HTML и частично заполненный CSS. Ваша задача — вписать недостающие свойства или значения в указанные места, чтобы добиться нужного эффекта прокрутки.

Список тем

Базовая вертикальная прокрутка с прилипанием

Создайте контейнер с вертикальной прокруткой, в котором каждый дочерний элемент будет точкой прилипания. Прокрутка должна приводить к остановке на начале каждого дочернего элемента. Заполните пропуски в CSS, чтобы активировать базовый функционал Scroll Snap для вертикальной оси.

CSS

.container {
  height: 300px;
  overflow-y: scroll;
  border: 1px solid #ccc;
  /* Включите Scroll Snap для вертикальной оси */
  input1: input2 input3;
}

.item {
  height: 300px;
  border-bottom: 1px dashed #eee;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2em;
  /* Укажите, что элемент должен выравниваться по началу */
  scroll-snap-align: start;
}

.item:nth-child(odd) {
  background-color: #f0f8ff;
}

.item:nth-child(even) {
  background-color: #e6f2ff;
}

                     .container {
  height: 300px;
  overflow-y: scroll;
  border: 1px solid #ccc;
  /* Включите Scroll Snap для вертикальной оси */
  input1: input2 input3;
}

.item {
  height: 300px;
  border-bottom: 1px dashed #eee;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2em;
  /* Укажите, что элемент должен выравниваться по началу */
  scroll-snap-align: start;
}

.item:nth-child(odd) {
  background-color: #f0f8ff;
}

.item:nth-child(even) {
  background-color: #e6f2ff;
}

HTML

<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
</div>

Для включения Scroll Snap на контейнере используется свойство `scroll-snap-type`. Оно принимает два значения: ось прокрутки (`x`, `y`, `both`) и строгость (`mandatory`, `proximity`). Для дочерних элементов используется `scroll-snap-align` (`start`, `center`, `end`). В этом задании нужно указать ось `y` и строгость `proximity` для контейнера.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Отметить решенным

Показать подсказку

Горизонтальная прокрутка с выравниванием по центру

Создайте контейнер с горизонтальной прокруткой. Элементы внутри должны располагаться в ряд. Настройте Scroll Snap так, чтобы при прокрутке каждый элемент прилипал к центру видимой области контейнера.

CSS

.container {
  display: flex;
  overflow-x: scroll;
  width: 370px; /* Ширина соответствует iframe */
  border: 1px solid #ccc;
  /* Включите Scroll Snap для горизонтальной оси */
  input1: x proximity;
}

.item {
  flex: 0 0 250px; /* Ширина элемента */
  height: 280px;
  margin-right: 10px;
  background-color: #f0f8ff;
  border-right: 1px dashed #eee;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2em;
  /* Укажите, что элемент должен выравниваться по центру */
  input2: input3;
}

.item:last-child {
  margin-right: 0;
}

                     .container {
  display: flex;
  overflow-x: scroll;
  width: 370px; /* Ширина соответствует iframe */
  border: 1px solid #ccc;
  /* Включите Scroll Snap для горизонтальной оси */
  input1: x proximity;
}

.item {
  flex: 0 0 250px; /* Ширина элемента */
  height: 280px;
  margin-right: 10px;
  background-color: #f0f8ff;
  border-right: 1px dashed #eee;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2em;
  /* Укажите, что элемент должен выравниваться по центру */
  input2: input3;
}

.item:last-child {
  margin-right: 0;
}

HTML

<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
</div>

Используйте `scroll-snap-type` для горизонтальной оси (`x`). Для дочерних элементов используйте `scroll-snap-align` со значением `center`, чтобы они выравнивались по центру контейнера при остановке прокрутки.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Отметить решенным

Показать подсказку

Обязательное прилипание (Mandatory)

Настройте вертикальный контейнер так, чтобы прокрутка всегда завершалась на одном из дочерних элементов. Не должно быть возможности остановиться между элементами. Используйте соответствующее значение строгости для `scroll-snap-type`.

CSS

.container {
  height: 300px;
  overflow-y: scroll;
  border: 1px solid #ccc;
  /* Включите обязательное прилипание по вертикальной оси */
  scroll-snap-type: y input1;
}

.item {
  height: 300px;
  border-bottom: 1px dashed #eee;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2em;
  scroll-snap-align: start;
}

.item:nth-child(odd) {
  background-color: #f0f8ff;
}

.item:nth-child(even) {
  background-color: #e6f2ff;
}

                     .container {
  height: 300px;
  overflow-y: scroll;
  border: 1px solid #ccc;
  /* Включите обязательное прилипание по вертикальной оси */
  scroll-snap-type: y input1;
}

.item {
  height: 300px;
  border-bottom: 1px dashed #eee;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2em;
  scroll-snap-align: start;
}

.item:nth-child(odd) {
  background-color: #f0f8ff;
}

.item:nth-child(even) {
  background-color: #e6f2ff;
}

HTML

<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
</div>

Чтобы браузер всегда докручивал до ближайшей точки прилипания, используйте значение `mandatory` в свойстве `scroll-snap-type`.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Отметить решенным

Показать подсказку

Галерея изображений с прилипанием

Создайте простую горизонтальную галерею изображений. При прокрутке каждое изображение должно плавно прилипать к началу контейнера. Используйте предоставленные URL изображений.

CSS

.gallery {
  display: flex;
  overflow-x: scroll;
  width: 370px;
  height: 250px;
  border: 1px solid #ccc;
  /* Включите горизонтальное прилипание */
  input1: input2 proximity;
}

.gallery img {
  width: 350px; /* Ширина чуть меньше контейнера */
  height: 248px;
  object-fit: cover;
  margin-right: 10px;
  /* Выравнивание по началу */
  input3: start;
}

.gallery img:last-child {
  margin-right: 0;
}

                     .gallery {
  display: flex;
  overflow-x: scroll;
  width: 370px;
  height: 250px;
  border: 1px solid #ccc;
  /* Включите горизонтальное прилипание */
  input1: input2 proximity;
}

.gallery img {
  width: 350px; /* Ширина чуть меньше контейнера */
  height: 248px;
  object-fit: cover;
  margin-right: 10px;
  /* Выравнивание по началу */
  input3: start;
}

.gallery img:last-child {
  margin-right: 0;
}

HTML

<div class="gallery">
  <img src="https://naytikurs.ru/img/1.png" alt="Image 1">
  <img src="https://naytikurs.ru/img/2.png" alt="Image 2">
  <img src="https://naytikurs.ru/img/4.png" alt="Image 4">
  <img src="https://naytikurs.ru/img/5.png" alt="Image 5">
</div>

Задайте контейнеру `display: flex` и `overflow-x: scroll`. Включите горизонтальное прилипание с помощью `scroll-snap-type: x proximity;`. Для каждого изображения (`img`) используйте `scroll-snap-align: start;`.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Отметить решенным

Показать подсказку

Прилипание к концу элемента

Настройте горизонтальный контейнер так, чтобы каждый дочерний элемент прилипал своим правым краем к правому краю контейнера при остановке прокрутки.

CSS

.container {
  display: flex;
  overflow-x: scroll;
  width: 370px;
  border: 1px solid #ccc;
  scroll-snap-type: x proximity;
}

.item {
  flex: 0 0 250px;
  height: 280px;
  margin-right: 10px;
  background-color: #f0f8ff;
  border-right: 1px dashed #eee;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2em;
  /* Укажите, что элемент должен выравниваться по своему концу */
  input1: input2;
}

.item:last-child {
  margin-right: 0;
}

                     .container {
  display: flex;
  overflow-x: scroll;
  width: 370px;
  border: 1px solid #ccc;
  scroll-snap-type: x proximity;
}

.item {
  flex: 0 0 250px;
  height: 280px;
  margin-right: 10px;
  background-color: #f0f8ff;
  border-right: 1px dashed #eee;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2em;
  /* Укажите, что элемент должен выравниваться по своему концу */
  input1: input2;
}

.item:last-child {
  margin-right: 0;
}

HTML

<div class="container">
  <div class="item">Item 1</div>
  <div class="item">Item 2</div>
  <div class="item">Item 3</div>
  <div class="item">Item 4</div>
</div>

Используйте `scroll-snap-type` для горизонтальной оси. Для дочерних элементов используйте `scroll-snap-align` со значением `end`, чтобы они выравнивались по своему конечному краю.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Отметить решенным

Показать подсказку

Отступ прилипания сверху (Scroll Padding)

Представьте, что у вас есть фиксированный заголовок высотой 40px над контейнером прокрутки. Настройте контейнер так, чтобы при прилипании верхняя часть дочернего элемента не скрывалась под этим воображаемым заголовком. Добавьте необходимый отступ сверху для области прилипания.

CSS

.container {
  height: 300px;
  overflow-y: scroll;
  border: 1px solid #ccc;
  scroll-snap-type: y mandatory;
  /* Добавьте отступ сверху для области прилипания, равный 40px */
  input1: 40px;
}

.item {
  height: 300px;
  border-bottom: 1px dashed #eee;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2em;
  scroll-snap-align: start;
  background-color: #e6f2ff;
}

.item:nth-child(odd) {
  background-color: #f0f8ff;
}

                     .container {
  height: 300px;
  overflow-y: scroll;
  border: 1px solid #ccc;
  scroll-snap-type: y mandatory;
  /* Добавьте отступ сверху для области прилипания, равный 40px */
  input1: 40px;
}

.item {
  height: 300px;
  border-bottom: 1px dashed #eee;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2em;
  scroll-snap-align: start;
  background-color: #e6f2ff;
}

.item:nth-child(odd) {
  background-color: #f0f8ff;
}

HTML

<div style="height: 40px; background: lightcoral; text-align: center; line-height: 40px; position: sticky; top: 0; z-index: 1;">Фикс. Заголовок</div>
<div class="container">
  <div class="item">Секция 1</div>
  <div class="item">Секция 2</div>
  <div class="item">Секция 3</div>
</div>

Используйте свойство `scroll-padding-top` на контейнере прокрутки. Оно задает отступ от верхнего края контейнера, который учитывается при вычислении позиций прилипания.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Отметить решенным

Показать подсказку

Отступ элемента перед прилипанием (Scroll Margin)

Настройте вертикальный контейнер с прилипанием. Сделайте так, чтобы второй элемент прилипал не своим верхним краем, а немного ниже, создавая отступ в 30px перед точкой прилипания именно для этого элемента.

CSS

.container {
  height: 300px;
  overflow-y: scroll;
  border: 1px solid #ccc;
  scroll-snap-type: y mandatory;
}

.item {
  height: 300px;
  border-bottom: 1px dashed #eee;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2em;
  scroll-snap-align: start;
  background-color: #f0f8ff;
}

.item:nth-child(even) {
  background-color: #e6f2ff;
}

.offset-item {
  /* Добавьте отступ сверху для этого элемента перед точкой прилипания, равный 30px */
  input1: 30px;
}

                     .container {
  height: 300px;
  overflow-y: scroll;
  border: 1px solid #ccc;
  scroll-snap-type: y mandatory;
}

.item {
  height: 300px;
  border-bottom: 1px dashed #eee;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2em;
  scroll-snap-align: start;
  background-color: #f0f8ff;
}

.item:nth-child(even) {
  background-color: #e6f2ff;
}

.offset-item {
  /* Добавьте отступ сверху для этого элемента перед точкой прилипания, равный 30px */
  input1: 30px;
}

HTML

<div class="container">
  <div class="item">Секция 1</div>
  <div class="item offset-item">Секция 2 (с отступом)</div>
  <div class="item">Секция 3</div>
  <div class="item">Секция 4</div>
</div>

Используйте свойство `scroll-margin-top` на конкретном дочернем элементе (в данном случае, на втором элементе с классом `.offset-item`). Это свойство задает отступ для элемента, который учитывается контейнером при расчете точки прилипания.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Отметить решенным

Показать подсказку