Hide the Native Browser Scrollbar in Webflow

When designing a custom scrollbar in Webflow, you may notice that the browser’s default scrollbar still appears on the right side of your site. This can create visual clutter or even a double scrollbar effect, which ruins the polished look you’re aiming for.

In this post, I’ll show you exactly how to remove the native scrollbar using CSS, so only your custom scrollbar is visible.

We’ll cover:

  • How to apply CSS that hides the native scrollbar without breaking scroll functionality
  • Where to place the CSS code inside Webflow (using Site Settings)

This approach ensures your users can still scroll normally, but without seeing the default scrollbar on the right side. For some projects, you may also need to adjust the overflow property carefully, especially if you’re working with locked sections or custom scrolling areas.

Watch the full video for a step-by-step walkthrough and best practices on applying these changes smoothly in Webflow.

.Get the <"code">


Remember to put the code inside a style open and close tag!