Dominando o Scroll Snap Horizontal em CSS - Tutorial Completo

Introdução

Neste laboratório, exploraremos o conceito de scroll snap horizontal em CSS. O laboratório irá guiá-lo através da criação de um contêiner com rolagem horizontal que se encaixará em elementos durante a rolagem. Você aprenderá como usar a propriedade scroll-snap-type e scroll-snap-align para criar um efeito de encaixe (snap) e como controlar o alinhamento do encaixe. Ao final do laboratório, você terá uma boa compreensão de como criar um layout de rolagem horizontal elegante e amigável ao usuário.

Este é um Lab Guiado, que fornece instruções passo a passo para ajudá-lo a aprender e praticar. Siga as instruções cuidadosamente para completar cada etapa e ganhar experiência prática. Dados históricos mostram que este é um laboratório de nível iniciante com uma taxa de conclusão de 100%. Recebeu uma taxa de avaliações positivas de 86% dos estudantes.

Scroll Snap Horizontal

index.html e style.css já foram fornecidos na VM.

Para criar um contêiner com rolagem horizontal que se encaixa em elementos durante a rolagem, siga estes passos:

Use display: grid e grid-auto-flow: column para criar um layout horizontal.
Use scroll-snap-type: x mandatory e overscroll-behavior-x: contain para criar um efeito de encaixe na rolagem horizontal.
Altere scroll-snap-align para start, stop ou center para ajustar o alinhamento do encaixe.

Aqui está um exemplo de código HTML e CSS que você pode usar:

HTML

<div class="horizontal-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>

CSS

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

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

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

Por favor, clique em 'Go Live' no canto inferior direito para executar o serviço web na porta 8080. Em seguida, você pode atualizar a aba Web 8080 para visualizar a página web.

Resumo

Parabéns! Você concluiu o laboratório de Scroll Snap Horizontal. Você pode praticar mais laboratórios no LabEx para aprimorar suas habilidades.