Introduction

La propriété CSS overflow: scroll est utilisée pour contrôler ce qui se passe lorsque le contenu dépasse les dimensions d'un élément conteneur. Lorsque vous utilisez overflow: scroll, des barres de défilement sont toujours visibles, que le défilement soit nécessaire ou non.

Cependant, parfois, vous voudriez peut-être cacher la barre de défilement pour des raisons esthétiques tout en conservant la possibilité de défiler.

Pour ce faire, suivez les étapes ci-dessous

‍

Ajoutez une classe à l’élément en overflow:scroll

‍

Ajoutez ce code dans votre container

En veillant à bien remplacer {votre-classe} par la classe que vous avez paramétré juste avant

Tips : Ajouter du code dans votre container vous permet de voir les résultats directement dans l’éditeur.

⚠️ Visible uniquement s’il s’agit de HTML/CSS, vous devrez publier votre projet pour voir le résultat en live s’il s’agit de JS.

 <style>
/* Cacher la barre de défilement pour Chrome, Safari et Opera */
.{votre-classe}::-webkit-scrollbar {
display: none;
}

/* Cacher la barre de défilement pour IE et Edge */
.{votre-classe} {
-ms-overflow-style: none;
}

/* Cacher la barre de défilement pour Firefox */
.{votre-classe} {
scrollbar-width: none;
}
</style>

Publiez et appréciez

Cacher les barres de défilement est principalement une décision de conception. Dans certains cas, cela peut donner à votre site ou application une apparence plus épurée.

Cependant, il est important de s'assurer que les utilisateurs comprennent toujours qu'ils peuvent défiler, surtout si le contenu dépassant est essentiel pour l'expérience utilisateur.