Cacher la barre de défilement dans Webflow

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, au sein de l'agence Webflow Gemeos, nous sommes souvent confronté au besoin de cacher cette barre de défilement pour des raisons esthétiques. Surement que cela vous arrive aussi, alors nous en avons fait un tutoriel.

Pour ce faire, suivez les étapes ci-dessous

‍

Solution 1 : En utilisant les variables CSS

Solution la plus simple, il vous suffit d'ajouter la propriété CSS scrollbar-width et de lui ajouter la valeur none (cf screen)

‍

Solution 2 : En utilisant du CSS

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.