Comment - Masquer la barre de défilement
Apprenez à masquer les barres de défilement avec CSS.
Comment masquer les barres de défilement
Ajouter overflow: hidden;
pour masquer à la fois la barre de défilement horizontale et verticale.
Exemple
body {
overflow: hidden; /* Hide scrollbars */
}
Pour masquer uniquement l'ascenseur vertical, ou uniquement l'ascenseur horizontal, utilisez overflow-y
ou overflow-x
:
Exemple
body {
overflow-y: hidden; /* Hide vertical scrollbar */
overflow-x: hidden; /* Hide horizontal scrollbar */
}
Notez que overflow: hidden
cela supprimera également la fonctionnalité de la barre de défilement. Il n'est pas possible de faire défiler la page.
Conseil : Pour en savoir plus sur la overflow
propriété, consultez notre didacticiel sur le débordement CSS ou notre référence sur les propriétés de débordement CSS .
Masquer les barres de défilement mais conserver la fonctionnalité
Pour masquer les barres de défilement, mais toujours pouvoir continuer à défiler, vous pouvez utiliser le code suivant :
Exemple
/* Hide scrollbar for Chrome, Safari and Opera */
.example::-webkit-scrollbar {
display: none;
}
/* Hide scrollbar
for IE, Edge and Firefox */
.example {
-ms-overflow-style: none; /*
IE and Edge */
scrollbar-width: none; /* Firefox */
}
Les navigateurs Webkit, tels que Chrome, Safari et Opera, prennent en charge le ::-webkit-scrollbar
pseudo-élément non standard, ce qui nous permet de modifier l'apparence de la barre de défilement du navigateur. IE et Edge prennent en charge la -ms-overflow-style:
propriété, et Firefox prend en charge la scrollbar-width
propriété, ce qui nous permet de masquer la barre de défilement, mais de conserver la fonctionnalité.