Dominando el deslizamiento vertical con ajuste automático con CSS

Introducción

En este laboratorio, profundizaremos en el mundo de la programación CSS y exploraremos sus diversas características y funcionalidades. El objetivo de este laboratorio es equipar a los aprendices con las habilidades necesarias para crear páginas web visualmente atractivas y responsivas utilizando CSS. A través de la práctica y la experimentación práctica, los aprendices adquirirán una sólida comprensión de la sintaxis, los selectores, las propiedades y más de CSS.

Este es un Guided Lab, que proporciona instrucciones paso a paso para ayudarte a aprender y practicar. Sigue las instrucciones cuidadosamente para completar cada paso y obtener experiencia práctica. Los datos históricos muestran que este es un laboratorio de nivel principiante con una tasa de finalización del 100%. Ha recibido una tasa de reseñas positivas del 100% por parte de los estudiantes.

Deslizamiento vertical con ajuste automático

index.html y style.css ya se han proporcionado en la máquina virtual.

Este código crea un contenedor deslizable que se ajusta a los elementos mientras se desliza. Para lograr este efecto, se siguen los siguientes pasos:

display: grid y grid-auto-flow: row se utilizan para crear un diseño vertical.
scroll-snap-type: y mandatory y overscroll-behavior-y: contain se utilizan para crear el efecto de ajuste automático en el deslizamiento vertical.
scroll-snap-align con start, stop o center se puede utilizar para cambiar el alineamiento del ajuste automático.

Aquí está el código HTML y 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;
}

Haga clic en 'Go Live' en la esquina inferior derecha para ejecutar el servicio web en el puerto 8080. Luego, puede actualizar la pestaña Web 8080 para previsualizar la página web.

Resumen

¡Felicidades! Has completado el laboratorio de Deslizamiento vertical con ajuste automático. Puedes practicar más laboratorios en LabEx para mejorar tus habilidades.