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.

Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL css(("CSS")) -.-> css/IntermediateStylingGroup(["Intermediate Styling"]) css(("CSS")) -.-> css/CodingStandardsandBestPracticesGroup(["Coding Standards and Best Practices"]) css(("CSS")) -.-> css/BasicConceptsGroup(["Basic Concepts"]) css(("CSS")) -.-> css/CoreLayoutGroup(["Core Layout"]) css/BasicConceptsGroup -.-> css/selectors("Selectors") css/CoreLayoutGroup -.-> css/width_and_height("Width and Height") css/CoreLayoutGroup -.-> css/display_property("Display Property") css/IntermediateStylingGroup -.-> css/pseudo_elements("Pseudo-elements") css/CodingStandardsandBestPracticesGroup -.-> css/comments("Comments") subgraph Lab Skills css/selectors -.-> lab-35209{{"Masquer les barres de défilement"}} css/width_and_height -.-> lab-35209{{"Masquer les barres de défilement"}} css/display_property -.-> lab-35209{{"Masquer les barres de défilement"}} css/pseudo_elements -.-> lab-35209{{"Masquer les barres de défilement"}} css/comments -.-> lab-35209{{"Masquer les barres de défilement"}} end

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.