Maîtriser le masquage des barres de défilement : Améliorer l'expérience utilisateur

Introduction

Dans ce laboratoire, nous allons explorer le concept de masquage des barre de défilement sur un élément tout en le laissant toujours défilable à l'aide de CSS. Nous utiliserons la propriété overflow: auto pour activer le défilement, et scrollbar-width: none pour masquer les barres de défilement sur Firefox, et display: none sur le pseudo-élément ::-webkit-scrollbar pour masquer les barres de défilement sur les navigateurs WebKit. Ce laboratoire vous procurera une expérience pratique pour implémenter cette technique CSS afin d'améliorer l'expérience utilisateur sur les éléments défilables.

Ceci est un Guided Lab, qui fournit des instructions étape par étape pour vous aider à apprendre et à pratiquer. Suivez attentivement les instructions pour compléter chaque étape et acquérir une expérience pratique. Les données historiques montrent que c'est un laboratoire de niveau débutant avec un taux de réussite de 100%. Il a reçu un taux d'avis positifs de 100% de la part des apprenants.

Masquer les barres de défilement

index.html et style.css ont déjà été fournis dans la machine virtuelle.

Pour permettre à un élément d'être défilable tout en masquant les barres de défilement, suivez ces étapes :

Utilisez overflow: auto pour activer le défilement sur l'élément.
Utilisez scrollbar-width: none pour masquer les barres de défilement sur Firefox.
Utilisez display: none sur le pseudo-élément ::-webkit-scrollbar pour masquer les barres de défilement sur les navigateurs WebKit (tels que Chrome, Edge et Safari).

Voici une implémentation d'exemple :

<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;
}

/* Masquer les barres de défilement sur les navigateurs WebKit */
.scrollable::-webkit-scrollbar {
  display: none;
}

Veuillez cliquer sur 'Go Live' dans le coin inférieur droit pour exécuter le service web sur le port 8080. Ensuite, vous pouvez actualiser l'onglet Web 8080 pour prévisualiser la page web.

Sommaire

Félicitations ! Vous avez terminé le laboratoire Masquer les barres de défilement. Vous pouvez pratiquer d'autres laboratoires dans LabEx pour améliorer vos compétences.