Comment masquer la barre de défilement

Apprendre à masquer la barre de défilement en utilisant CSS.

Comment masquer la barre de défilement

Ajouter overflow: hidden;，qui peut masquer à la fois la barre de défilement horizontale et verticale.

Exemple

body {
  overflow: hidden; /* Masquer les barres de défilement */
}

Essayez-le vous-même

Pour masquer uniquement la barre de défilement verticale ou uniquement la barre de défilement horizontale, utilisez overflow-y ou overflow-x:

Exemple

body {
  overflow-y: hidden; /* Masquer la barre de défilement verticale */
  overflow-x: hidden; /* Masquer la barre de défilement horizontale */
}

Essayez-le vous-même

Veuillez noter que,overflow: hidden Supprime également les fonctionnalités de la barre de défilement. Il n'est pas possible de faire défiler la page.

Masquer la barre de défilement tout en conservant les fonctionnalités

Pour masquer la barre de défilement tout en permettant de continuer à dérouler, vous pouvez utiliser le code suivant :

Exemple

/* Masquer la barre de défilement pour Chrome, Safari et Opera */
.example::-webkit-scrollbar {
  display: none;
}
/* Masquer la barre de défilement pour IE, Edge et Firefox */
.example {
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */
}

Essayez-le vous-même

Navigateurs Webkit (comme Chrome, Safari et Opera) supportent les non standards ::-webkit-scrollbar élément pseudo, qui nous permet de modifier l'apparence de la barre de défilement du navigateur. Supporté par IE et Edge -ms-overflow-style : supportée par Firefox propriété scrollbar-width Propriétés, qui nous permettent de masquer la barre de défilement tout en conservant ses fonctionnalités.

Pages associées

Tutoriel :Débordement CSS

Manuel de référence :Propriété overflow de CSS