Hide the Scrollbar 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, scrollbars are always visible, whether scrolling is needed or not.

That said, at Webflow agency Gemeos, we often run into the need to hide that scrollbar for aesthetic reasons. Chances are you’ve needed to do the same, so we turned it into a tutorial.

To do that, follow the steps below.

‍

Solution 1 : Using CSS variables

The simplest solution is to add the CSS property scrollbar-width and set it to none (see screenshot)

‍

Solution 2 : Using CSS

Add a class to the element with overflow:scroll

‍

Add this code to your container

Just make sure you replace {votre-classe} with the class you set up just before

Publish and enjoy

Hiding scrollbars is mostly a design choice. In some cases, it can give your site or app a cleaner look.

That said, make sure users still understand they can scroll, especially if the overflowing content is essential to the user experience.