How can I hide the scrollbar that appears in the middle of the screen when using the "Auto Scroll" feature in Webflow for my left-aligned div?
TL;DR
- Access Project Settings in Webflow and click on the Custom Code tab.
- Add CSS to hide the scrollbar, targeting the specific div class in either Head or Footer Code section.
- Save changes and republish your site.
When using the Auto Scroll feature in Webflow, a scrollbar may appear, distracting from your design. Here's how you can hide it.
1. Access Custom Code Settings
- Go to Project Settings in Webflow.
- Click on the Custom Code tab.
2. Add Custom CSS to Hide Scrollbar
- In the Head Code or Footer Code section, add the following CSS to target your specific div and hide the scrollbar:
.your-div-class {
scrollbar-width: none; /* For Firefox */
-ms-overflow-style: none; /* For Internet Explorer and Edge */
}
.your-div-class::-webkit-scrollbar {
display: none; /* For Chrome, Safari, and Opera */
}
- Replace
.your-div-classwith the exact class name of the div where the scrollbar appears.
3. Save and Publish
- Save the changes in Custom Code.
- Republish your site to apply the changes.
Summary
You can hide the scrollbar by adding CSS to your Webflow project’s custom code section, targeting the specific div to ensure a cleaner user experience.