Hide the scroll bar in Webflow

Introduction

The CSS property overflow: scroll is used to control what happens when content exceeds the dimensions of a container element. When you use overflow: scroll, scroll bars are always visible regardless of whether scrolling is required or not.

However, within theWebflow agency Gemeos, we are often faced with the need to hide this scroll bar for aesthetic reasons. Surely it happens to you too, so we made a tutorial out of it.

To do so, follow the steps below

‍

Solution 1: Using CSS Variables

Simplest solution, just add the CSS property scrollbar-width and to add value to it None (see screen)

‍

Solution 2: Using CSS embed code

Add a class to the element in overflow:scroll

‍

Add this code to your container

Making sure to replace {your-class} by the class you set up just before

Tips: Adding code to your container allows you to see the results directly in the editor.

⚠️ Visible only if it is HTML/CSS, you will have to publish your project to see the result live if it is 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>

Publish and enjoy

Hiding scroll bars is primarily a design decision. In some cases, this can make your site or app look more streamlined.

However, it's important to make sure that users always understand that they can scroll, especially if overtaking content is critical to the user experience.