Мастерство вертикального скроллирования с зацеплением с использованием CSS

Введение

В этом практическом занятии мы углубимся в мир программирования CSS и исследуем его различные функции и возможности. Цель этого практического занятия - дать ученикам необходимые навыки для создания визуально привлекательных и отзывчивых веб-страниц с использованием CSS. Через практику и экспериментацию ученики получат твердый понятья синтаксиса CSS, селекторов, свойств и т.д.

Это Guided Lab, который предоставляет пошаговые инструкции, чтобы помочь вам учиться и практиковаться. Внимательно следуйте инструкциям, чтобы выполнить каждый шаг и получить практический опыт. Исторические данные показывают, что это лабораторная работа уровня начальный с процентом завершения 100%. Он получил 100% положительных отзывов от учащихся.

Вертикальное скроллирование с зацеплением

В ВМ уже предоставлены index.html и style.css.

Этот код создает прокручиваемый контейнер, который при скроллировании прилипает к элементам. Для достижения этого эффекта предпринимаются следующие шаги:

display: grid и grid-auto-flow: row используются для создания вертикального макета.
scroll-snap-type: y mandatory и overscroll-behavior-y: contain используются для создания эффекта зацепления при вертикальном скроллировании.
scroll-snap-align с значениями start, stop или center можно использовать для изменения выравнивания зацепления.

Вот HTML и CSS код:

<div class="vertical-snap">
  <a href="#"><img src="https://picsum.photos/id/1067/640/640" /></a>
  <a href="#"><img src="https://picsum.photos/id/122/640/640" /></a>
  <a href="#"><img src="https://picsum.photos/id/188/640/640" /></a>
  <a href="#"><img src="https://picsum.photos/id/249/640/640" /></a>
  <a href="#"><img src="https://picsum.photos/id/257/640/640" /></a>
  <a href="#"><img src="https://picsum.photos/id/259/640/640" /></a>
  <a href="#"><img src="https://picsum.photos/id/283/640/640" /></a>
  <a href="#"><img src="https://picsum.photos/id/288/640/640" /></a>
  <a href="#"><img src="https://picsum.photos/id/299/640/640" /></a>
</div>

.vertical-snap {
  margin: 0 auto;
  display: grid;
  grid-auto-flow: row;
  gap: 1rem;
  width: calc(180px + 1rem);
  padding: 1rem;
  height: 480px;
  overflow-y: auto;
  overscroll-behavior-y: contain;
  scroll-snap-type: y mandatory;
}

.vertical-snap > a {
  scroll-snap-align: center;
}

.vertical-snap img {
  width: 180px;
  object-fit: contain;
  border-radius: 1rem;
}

Пожалуйста, нажмите кнопку "Go Live" в нижнем правом углу, чтобы запустить веб-сервис на порту 8080. Затем можно обновить вкладку Web 8080, чтобы просмотреть веб-страницу.

Резюме

Поздравляем! Вы завершили практическое занятие по вертикальному скроллированию с зацеплением. Вы можете выполнить больше практических занятий в LabEx, чтобы улучшить свои навыки.