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">
Conclusion
Removing the browser’s default scrollbar helps give your site a cleaner, more intentional look — especially when you’ve invested time in designing a custom scrollbar. With just a few lines of CSS, you can polish your design and deliver a better user experience across devices and browsers. Make sure to test your changes carefully to maintain smooth, accessible scrolling for all visitors.
