Fonctionnel

Cacher la barre de défilement dans Webflow

outils :
Illustration croce

Sommaire

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

Overflow Scroll dans Webflow

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.

blind
Ces tutoriels pourraient vous intéresser

Nos tutoriels de la même catégorie

Ajouter un sommaire dans Webflow

Webflow
Finsweet
Fonctionnel

Personnaliser le design des sliders dots dans Webflow

Webflow
Embed
Fonctionnel

Automatiser l’envoi d’un mail aux prospects qui remplissent un formulaire

Webflow
Zapier
Fonctionnel
Voir tous nos tutoriels
Illustration traits
Nous utilisons les meilleurs outils

Votre site est développé avec les meilleurs outils et les meilleurs pratiques

Gemeos ne vous propose pas simplement un site web, mais une expertise sur les meilleurs outils pour vous garantir un retour sur investissement optimal. 

Figma

Pour designer votre site web sur mesure et optimiser son taux de conversion

Webflow

Pour une intégration pixel perfect et optimisée de votre site web

Client-first

Pour une organisation aux petits oignons de votre projet

Wized

Pour ajouter des fonctionnalités avancées à votre projet

Make

Pour automatiser vos fluxs de travail et vous faire gagner un max de temps