Dominando a Ocultação de Barras de Rolagem: Melhore a Experiência do Usuário

Introdução

Neste laboratório, exploraremos o conceito de ocultar barras de rolagem em um elemento, permitindo que ele ainda seja rolável usando CSS. Usaremos a propriedade overflow: auto para habilitar a rolagem e scrollbar-width: none para ocultar as barras de rolagem no Firefox, e display: none no pseudo-elemento ::-webkit-scrollbar para ocultar as barras de rolagem em navegadores WebKit. Este laboratório fornecerá uma experiência prática na implementação desta técnica CSS para melhorar a experiência do usuário em elementos roláveis.

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 100% dos estudantes.

Ocultar Barras de Rolagem

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

Para permitir que um elemento seja rolável enquanto oculta as barras de rolagem, siga estes passos:

Use overflow: auto para habilitar a rolagem no elemento.
Use scrollbar-width: none para ocultar as barras de rolagem no Firefox.
Use display: none no pseudo-elemento ::-webkit-scrollbar para ocultar as barras de rolagem em navegadores WebKit (como Chrome, Edge e Safari).

Aqui está um exemplo de implementação:

<div class="scrollable">
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean interdum id
    leo a consectetur. Integer justo magna, ultricies vel enim vitae, egestas
    efficitur leo. Ut nulla orci, rutrum eu augue sed, tempus pellentesque quam.
  </p>
</div>

.scrollable {
  width: 200px;
  height: 100px;
  overflow: auto;
  scrollbar-width: none;
}

/* Hide scrollbars on WebKit browsers */
.scrollable::-webkit-scrollbar {
  display: none;
}

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 Ocultar Barras de Rolagem. Você pode praticar mais laboratórios no LabEx para aprimorar suas habilidades.